@xsolla/xui-context-menu 0.64.0-pr81.1768677662

package/native/index.js

@@ -0,0 +1,1924 @@
+"use strict";
+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/index.tsx
+var index_exports = {};
+__export(index_exports, {
+  ContextMenu: () => ContextMenu,
+  ContextMenuCheckboxItem: () => ContextMenuCheckboxItem,
+  ContextMenuGroup: () => ContextMenuGroup,
+  ContextMenuItem: () => ContextMenuItem,
+  ContextMenuRadioGroup: () => ContextMenuRadioGroup,
+  ContextMenuRadioItem: () => ContextMenuRadioItem,
+  ContextMenuSearch: () => ContextMenuSearch,
+  ContextMenuSeparator: () => ContextMenuSeparator,
+  useContextMenu: () => useContextMenu,
+  useContextMenuPosition: () => useContextMenuPosition,
+  useContextMenuRequired: () => useContextMenuRequired,
+  useKeyboardNavigation: () => useKeyboardNavigation,
+  useRadioGroup: () => useRadioGroup
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/ContextMenu.tsx
+var import_react11 = __toESM(require("react"));
+
+// ../primitives-native/src/Box.tsx
+var import_react_native = require("react-native");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Box = ({
+  children,
+  onPress,
+  onLayout,
+  onMoveShouldSetResponder,
+  onResponderGrant,
+  onResponderMove,
+  onResponderRelease,
+  onResponderTerminate,
+  backgroundColor,
+  borderColor,
+  borderWidth,
+  borderBottomWidth,
+  borderBottomColor,
+  borderTopWidth,
+  borderTopColor,
+  borderLeftWidth,
+  borderLeftColor,
+  borderRightWidth,
+  borderRightColor,
+  borderRadius,
+  borderStyle,
+  height,
+  padding,
+  paddingHorizontal,
+  paddingVertical,
+  margin,
+  marginTop,
+  marginBottom,
+  marginLeft,
+  marginRight,
+  flexDirection,
+  alignItems,
+  justifyContent,
+  position,
+  top,
+  bottom,
+  left,
+  right,
+  width,
+  flex,
+  overflow,
+  zIndex,
+  hoverStyle,
+  pressStyle,
+  style,
+  "data-testid": dataTestId,
+  testID,
+  as,
+  src,
+  alt,
+  ...rest
+}) => {
+  const getContainerStyle = (pressed) => ({
+    backgroundColor: pressed && pressStyle?.backgroundColor ? pressStyle.backgroundColor : backgroundColor,
+    borderColor,
+    borderWidth,
+    borderBottomWidth,
+    borderBottomColor,
+    borderTopWidth,
+    borderTopColor,
+    borderLeftWidth,
+    borderLeftColor,
+    borderRightWidth,
+    borderRightColor,
+    borderRadius,
+    borderStyle,
+    overflow,
+    zIndex,
+    height,
+    width,
+    padding,
+    paddingHorizontal,
+    paddingVertical,
+    margin,
+    marginTop,
+    marginBottom,
+    marginLeft,
+    marginRight,
+    flexDirection,
+    alignItems,
+    justifyContent,
+    position,
+    top,
+    bottom,
+    left,
+    right,
+    flex,
+    ...style
+  });
+  const finalTestID = dataTestId || testID;
+  const {
+    role,
+    tabIndex,
+    onKeyDown,
+    onKeyUp,
+    "aria-label": _ariaLabel,
+    "aria-labelledby": _ariaLabelledBy,
+    "aria-current": _ariaCurrent,
+    "aria-disabled": _ariaDisabled,
+    "aria-live": _ariaLive,
+    className,
+    "data-testid": _dataTestId,
+    ...nativeRest
+  } = rest;
+  if (as === "img" && src) {
+    const imageStyle = {
+      width,
+      height,
+      borderRadius,
+      position,
+      top,
+      bottom,
+      left,
+      right,
+      ...style
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react_native.Image,
+      {
+        source: { uri: src },
+        style: imageStyle,
+        testID: finalTestID,
+        resizeMode: "cover",
+        ...nativeRest
+      }
+    );
+  }
+  if (onPress) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react_native.Pressable,
+      {
+        onPress,
+        onLayout,
+        onMoveShouldSetResponder,
+        onResponderGrant,
+        onResponderMove,
+        onResponderRelease,
+        onResponderTerminate,
+        style: ({ pressed }) => getContainerStyle(pressed),
+        testID: finalTestID,
+        ...nativeRest,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react_native.View,
+    {
+      style: getContainerStyle(),
+      testID: finalTestID,
+      onLayout,
+      onMoveShouldSetResponder,
+      onResponderGrant,
+      onResponderMove,
+      onResponderRelease,
+      onResponderTerminate,
+      ...nativeRest,
+      children
+    }
+  );
+};
+
+// ../primitives-native/src/Text.tsx
+var import_react_native2 = require("react-native");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var roleMap = {
+  alert: "alert",
+  heading: "header",
+  button: "button",
+  link: "link",
+  text: "text"
+};
+var Text = ({
+  children,
+  color,
+  fontSize,
+  fontWeight,
+  fontFamily,
+  id,
+  role,
+  ...props
+}) => {
+  let resolvedFontFamily = fontFamily ? fontFamily.split(",")[0].replace(/['"]/g, "").trim() : void 0;
+  if (resolvedFontFamily === "Pilat Wide Bold") {
+    resolvedFontFamily = void 0;
+  }
+  const style = {
+    color,
+    fontSize: typeof fontSize === "number" ? fontSize : void 0,
+    fontWeight,
+    fontFamily: resolvedFontFamily,
+    textDecorationLine: props.textDecoration
+  };
+  const accessibilityRole = role ? roleMap[role] : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.Text, { style, testID: id, accessibilityRole, children });
+};
+
+// ../primitives-native/src/Spinner.tsx
+var import_react_native3 = require("react-native");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Spinner = ({
+  color,
+  size,
+  role,
+  "aria-label": ariaLabel,
+  "aria-live": ariaLive,
+  "aria-describedby": ariaDescribedBy,
+  testID
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    import_react_native3.View,
+    {
+      accessible: true,
+      accessibilityRole: role === "status" ? "none" : void 0,
+      accessibilityLabel: ariaLabel,
+      accessibilityLiveRegion: ariaLive === "polite" ? "polite" : ariaLive === "assertive" ? "assertive" : "none",
+      testID,
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        import_react_native3.ActivityIndicator,
+        {
+          color,
+          size: typeof size === "number" ? size : "small"
+        }
+      )
+    }
+  );
+};
+Spinner.displayName = "Spinner";
+
+// ../primitives-native/src/Icon.tsx
+var import_react = __toESM(require("react"));
+var import_react_native4 = require("react-native");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Icon = ({ children, color, size }) => {
+  const style = {
+    width: typeof size === "number" ? size : void 0,
+    height: typeof size === "number" ? size : void 0,
+    alignItems: "center",
+    justifyContent: "center"
+  };
+  const childrenWithProps = import_react.default.Children.map(children, (child) => {
+    if (import_react.default.isValidElement(child)) {
+      return import_react.default.cloneElement(child, {
+        color: child.props.color || color,
+        // Also pass size if child seems to be an icon that needs it
+        size: child.props.size || size
+      });
+    }
+    return child;
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.View, { style, children: childrenWithProps });
+};
+
+// ../primitives-native/src/Divider.tsx
+var import_react_native5 = require("react-native");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+
+// ../primitives-native/src/Input.tsx
+var import_react2 = require("react");
+var import_react_native6 = require("react-native");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var keyboardTypeMap = {
+  text: "default",
+  number: "numeric",
+  email: "email-address",
+  tel: "phone-pad",
+  url: "url",
+  decimal: "decimal-pad"
+};
+var inputModeToKeyboardType = {
+  none: "default",
+  text: "default",
+  decimal: "decimal-pad",
+  numeric: "number-pad",
+  tel: "phone-pad",
+  search: "default",
+  email: "email-address",
+  url: "url"
+};
+var autoCompleteToTextContentType = {
+  "one-time-code": "oneTimeCode",
+  email: "emailAddress",
+  username: "username",
+  password: "password",
+  "new-password": "newPassword",
+  tel: "telephoneNumber",
+  "postal-code": "postalCode",
+  name: "name"
+};
+var InputPrimitive = (0, import_react2.forwardRef)(
+  ({
+    value,
+    placeholder,
+    onChange,
+    onChangeText,
+    onFocus,
+    onBlur,
+    onKeyDown,
+    disabled,
+    secureTextEntry,
+    style,
+    color,
+    fontSize,
+    placeholderTextColor,
+    maxLength,
+    name,
+    type,
+    inputMode,
+    autoComplete,
+    id,
+    "aria-invalid": ariaInvalid,
+    "aria-describedby": ariaDescribedBy,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-label": ariaLabel,
+    "aria-disabled": ariaDisabled,
+    "data-testid": dataTestId
+  }, ref) => {
+    const handleChangeText = (text) => {
+      onChangeText?.(text);
+      if (onChange) {
+        const syntheticEvent = {
+          target: { value: text },
+          currentTarget: { value: text },
+          type: "change",
+          nativeEvent: { text },
+          preventDefault: () => {
+          },
+          stopPropagation: () => {
+          },
+          isTrusted: false
+        };
+        onChange(syntheticEvent);
+      }
+    };
+    const keyboardType = inputMode ? inputModeToKeyboardType[inputMode] || "default" : type ? keyboardTypeMap[type] || "default" : "default";
+    const textContentType = autoComplete ? autoCompleteToTextContentType[autoComplete] : void 0;
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      import_react_native6.TextInput,
+      {
+        ref,
+        value,
+        placeholder,
+        onChangeText: handleChangeText,
+        onFocus,
+        onBlur,
+        onKeyPress: (e) => {
+          if (onKeyDown) {
+            onKeyDown({
+              key: e.nativeEvent.key,
+              preventDefault: () => {
+              }
+            });
+          }
+        },
+        editable: !disabled,
+        secureTextEntry: secureTextEntry || type === "password",
+        keyboardType,
+        textContentType,
+        style: [
+          {
+            color,
+            fontSize: typeof fontSize === "number" ? fontSize : void 0,
+            flex: 1,
+            padding: 0,
+            textAlign: style?.textAlign || "left"
+          },
+          style
+        ],
+        placeholderTextColor,
+        maxLength,
+        testID: dataTestId || id,
+        accessibilityLabel: ariaLabel,
+        accessibilityHint: ariaDescribedBy,
+        accessibilityState: {
+          disabled: disabled || ariaDisabled
+        },
+        accessible: true
+      }
+    );
+  }
+);
+InputPrimitive.displayName = "InputPrimitive";
+
+// ../primitives-native/src/TextArea.tsx
+var import_react3 = require("react");
+var import_react_native7 = require("react-native");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var TextAreaPrimitive = (0, import_react3.forwardRef)(
+  ({
+    value,
+    placeholder,
+    onChange,
+    onChangeText,
+    onFocus,
+    onBlur,
+    onKeyDown,
+    disabled,
+    style,
+    color,
+    fontSize,
+    placeholderTextColor,
+    maxLength,
+    rows,
+    id,
+    "aria-invalid": ariaInvalid,
+    "aria-describedby": ariaDescribedBy,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-label": ariaLabel,
+    "aria-disabled": ariaDisabled,
+    "data-testid": dataTestId
+  }, ref) => {
+    const handleChangeText = (text) => {
+      onChangeText?.(text);
+      if (onChange) {
+        const syntheticEvent = {
+          target: { value: text },
+          currentTarget: { value: text },
+          type: "change",
+          nativeEvent: { text },
+          preventDefault: () => {
+          },
+          stopPropagation: () => {
+          },
+          isTrusted: false
+        };
+        onChange(syntheticEvent);
+      }
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      import_react_native7.TextInput,
+      {
+        ref,
+        value,
+        placeholder,
+        onChangeText: handleChangeText,
+        onFocus,
+        onBlur,
+        onKeyPress: (e) => {
+          if (onKeyDown) {
+            onKeyDown({
+              key: e.nativeEvent.key,
+              preventDefault: () => {
+              }
+            });
+          }
+        },
+        editable: !disabled,
+        multiline: true,
+        numberOfLines: rows || 4,
+        style: [
+          {
+            color,
+            fontSize: typeof fontSize === "number" ? fontSize : void 0,
+            flex: 1,
+            padding: 0,
+            textAlignVertical: "top",
+            textAlign: style?.textAlign || "left"
+          },
+          style
+        ],
+        placeholderTextColor,
+        maxLength,
+        testID: dataTestId || id,
+        accessibilityLabel: ariaLabel,
+        accessibilityHint: ariaDescribedBy,
+        accessibilityState: {
+          disabled: disabled || ariaDisabled
+        },
+        accessible: true
+      }
+    );
+  }
+);
+TextAreaPrimitive.displayName = "TextAreaPrimitive";
+
+// src/ContextMenu.tsx
+var import_xui_core7 = require("@xsolla/xui-core");
+var import_xui_spinner = require("@xsolla/xui-spinner");
+
+// src/ContextMenuContext.tsx
+var import_react4 = require("react");
+var ContextMenuContext = (0, import_react4.createContext)(void 0);
+var useContextMenu = () => {
+  const context = (0, import_react4.useContext)(ContextMenuContext);
+  return context;
+};
+var useContextMenuRequired = () => {
+  const context = (0, import_react4.useContext)(ContextMenuContext);
+  if (!context) {
+    throw new Error(
+      "useContextMenuRequired must be used within a ContextMenu component"
+    );
+  }
+  return context;
+};
+
+// src/ContextMenuItem.tsx
+var import_react5 = require("react");
+var import_xui_core = require("@xsolla/xui-core");
+var import_xui_icons = require("@xsolla/xui-icons");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var ContextMenuItem = (0, import_react5.forwardRef)(
+  ({
+    children,
+    description,
+    icon,
+    trailing,
+    shortcut,
+    selected,
+    disabled,
+    active,
+    size: propSize,
+    hasSubmenu,
+    onPress,
+    "data-testid": testId = "context-menu-item"
+  }, ref) => {
+    const { theme } = (0, import_xui_core.useDesignSystem)();
+    const context = useContextMenu();
+    const size = propSize || context?.size || "m";
+    const sizeStyles = theme.sizing.contextMenu(size);
+    const itemRef = (0, import_react5.useRef)(null);
+    const brandColors = theme.colors.control.brand.primary;
+    const contentColors = theme.colors.content;
+    (0, import_react5.useEffect)(() => {
+      if (context && !disabled) {
+        const id = typeof children === "string" ? children : String(Math.random());
+        context.registerItem(id);
+        return () => context.unregisterItem(id);
+      }
+    }, [context, disabled, children]);
+    const handlePress = () => {
+      if (disabled) return;
+      onPress?.();
+      if (context) {
+        context.onItemSelect({
+          id: typeof children === "string" ? children : "",
+          label: typeof children === "string" ? children : "",
+          variant: "default",
+          selected
+        });
+      }
+    };
+    const handleKeyDown = (event) => {
+      if (disabled) return;
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        handlePress();
+      }
+    };
+    const getBackgroundColor = () => {
+      if (selected) {
+        return brandColors.bg;
+      }
+      if (active) {
+        return theme.colors.control.input.bgHover;
+      }
+      return "transparent";
+    };
+    const getTextColor = () => {
+      if (disabled) {
+        return theme.colors.control.input.textDisable;
+      }
+      if (selected) {
+        return contentColors.on.brand;
+      }
+      return theme.colors.content.primary;
+    };
+    const getIconColor = () => {
+      if (disabled) {
+        return theme.colors.content.tertiary;
+      }
+      if (selected) {
+        return contentColors.on.brand;
+      }
+      return theme.colors.content.secondary;
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+      Box,
+      {
+        ref: ref || itemRef,
+        role: "menuitem",
+        "aria-disabled": disabled || void 0,
+        "aria-selected": selected || void 0,
+        tabIndex: disabled ? -1 : 0,
+        flexDirection: "row",
+        alignItems: description ? "flex-start" : "center",
+        gap: sizeStyles.gap,
+        paddingHorizontal: sizeStyles.itemPaddingHorizontal,
+        paddingVertical: sizeStyles.itemPaddingVertical,
+        backgroundColor: getBackgroundColor(),
+        hoverStyle: !disabled && !selected ? {
+          backgroundColor: theme.colors.control.input.bgHover
+        } : void 0,
+        pressStyle: !disabled ? {
+          backgroundColor: selected ? brandColors.bgPress : theme.colors.control.input.bgDisable
+        } : void 0,
+        onPress: handlePress,
+        onKeyDown: handleKeyDown,
+        style: {
+          cursor: disabled ? "not-allowed" : "pointer",
+          opacity: disabled ? 0.5 : 1,
+          outline: "none"
+        },
+        "data-testid": testId,
+        children: [
+          icon && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            Box,
+            {
+              width: sizeStyles.iconSize,
+              marginTop: description ? 2 : 0,
+              alignItems: "center",
+              justifyContent: "center",
+              children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { size: sizeStyles.iconSize, color: getIconColor(), children: icon })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Box, { flex: 1, flexDirection: "column", gap: 2, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              Text,
+              {
+                color: getTextColor(),
+                fontSize: sizeStyles.fontSize,
+                fontWeight: "400",
+                lineHeight: sizeStyles.fontSize + 2,
+                children
+              }
+            ),
+            description && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              Text,
+              {
+                color: selected ? contentColors.on.brand : theme.colors.content.tertiary,
+                fontSize: sizeStyles.descriptionFontSize,
+                lineHeight: sizeStyles.descriptionFontSize + 2,
+                children: description
+              }
+            )
+          ] }),
+          shortcut && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            Text,
+            {
+              color: selected ? contentColors.on.brand : theme.colors.content.tertiary,
+              fontSize: sizeStyles.descriptionFontSize,
+              children: shortcut
+            }
+          ),
+          trailing,
+          hasSubmenu && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            Icon,
+            {
+              size: sizeStyles.iconSize - 4,
+              color: selected ? contentColors.on.brand : theme.colors.content.secondary,
+              children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_xui_icons.ArrowRight, {})
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+ContextMenuItem.displayName = "ContextMenuItem";
+
+// src/ContextMenuCheckboxItem.tsx
+var import_react6 = require("react");
+var import_xui_core2 = require("@xsolla/xui-core");
+var import_xui_icons2 = require("@xsolla/xui-icons");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var checkboxSizeMap = {
+  s: 14,
+  m: 16,
+  l: 18,
+  xl: 20
+};
+var checkIconSizeMap = {
+  s: 10,
+  m: 12,
+  l: 14,
+  xl: 16
+};
+var CheckboxIndicator = ({
+  checked,
+  indeterminate,
+  size,
+  disabled
+}) => {
+  const { theme } = (0, import_xui_core2.useDesignSystem)();
+  const brandColors = theme.colors.control.brand.primary;
+  const faintColors = theme.colors.control.faint;
+  const contentColors = theme.colors.content;
+  const boxSize = checkboxSizeMap[size];
+  const iconSize = checkIconSizeMap[size];
+  const isActive = checked || indeterminate;
+  const getBgColor = () => {
+    if (disabled) {
+      return brandColors.bgDisable;
+    }
+    if (isActive) {
+      return brandColors.bg;
+    }
+    return faintColors.bg;
+  };
+  const getBorderColor = () => {
+    if (isActive && !disabled) {
+      return brandColors.bg;
+    }
+    return faintColors.border;
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    Box,
+    {
+      width: boxSize,
+      height: boxSize,
+      borderRadius: 4,
+      borderWidth: isActive ? 0 : 1,
+      borderColor: getBorderColor(),
+      backgroundColor: getBgColor(),
+      alignItems: "center",
+      justifyContent: "center",
+      children: indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        Icon,
+        {
+          size: iconSize,
+          color: disabled ? contentColors.tertiary : contentColors.on.brand,
+          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_xui_icons2.Minus, {})
+        }
+      ) : checked ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        Icon,
+        {
+          size: iconSize,
+          color: disabled ? contentColors.tertiary : contentColors.on.brand,
+          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_xui_icons2.Check, {})
+        }
+      ) : null
+    }
+  );
+};
+var ContextMenuCheckboxItem = (0, import_react6.forwardRef)(
+  ({
+    children,
+    description,
+    leadingContent,
+    trailing,
+    checked = false,
+    indeterminate = false,
+    disabled,
+    size: propSize,
+    onCheckedChange,
+    onPress,
+    "data-testid": testId = "context-menu-checkbox-item"
+  }, ref) => {
+    const { theme } = (0, import_xui_core2.useDesignSystem)();
+    const context = useContextMenu();
+    const size = propSize || context?.size || "m";
+    const sizeStyles = theme.sizing.contextMenu(size);
+    const itemRef = (0, import_react6.useRef)(null);
+    const contentColors = theme.colors.content;
+    (0, import_react6.useEffect)(() => {
+      if (context && !disabled) {
+        const id = typeof children === "string" ? children : String(Math.random());
+        context.registerItem(id);
+        return () => context.unregisterItem(id);
+      }
+    }, [context, disabled, children]);
+    const handlePress = () => {
+      if (disabled) return;
+      const newChecked = !checked;
+      onCheckedChange?.(newChecked);
+      onPress?.();
+      if (context) {
+        context.onItemSelect({
+          id: typeof children === "string" ? children : "",
+          label: typeof children === "string" ? children : "",
+          variant: "checkbox",
+          checked: newChecked
+        });
+      }
+    };
+    const handleKeyDown = (event) => {
+      if (disabled) return;
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        handlePress();
+      }
+    };
+    const getTextColor = () => {
+      if (disabled) {
+        return theme.colors.control.input.textDisable;
+      }
+      return theme.colors.control.input.text;
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+      Box,
+      {
+        ref: ref || itemRef,
+        role: "menuitemcheckbox",
+        "aria-checked": indeterminate ? "mixed" : checked,
+        "aria-disabled": disabled || void 0,
+        tabIndex: disabled ? -1 : 0,
+        flexDirection: "row",
+        alignItems: description ? "flex-start" : "center",
+        gap: sizeStyles.gap,
+        paddingHorizontal: sizeStyles.itemPaddingHorizontal,
+        paddingVertical: sizeStyles.itemPaddingVertical,
+        backgroundColor: "transparent",
+        hoverStyle: !disabled ? {
+          backgroundColor: theme.colors.control.input.bgHover
+        } : void 0,
+        pressStyle: !disabled ? {
+          backgroundColor: theme.colors.control.input.bgDisable
+        } : void 0,
+        onPress: handlePress,
+        onKeyDown: handleKeyDown,
+        style: {
+          cursor: disabled ? "not-allowed" : "pointer",
+          opacity: disabled ? 0.5 : 1,
+          outline: "none"
+        },
+        "data-testid": testId,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            Box,
+            {
+              marginTop: description ? 2 : 0,
+              alignItems: "center",
+              justifyContent: "center",
+              children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                CheckboxIndicator,
+                {
+                  checked,
+                  indeterminate,
+                  size,
+                  disabled
+                }
+              )
+            }
+          ),
+          leadingContent && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Box, { padding: 5, alignItems: "center", justifyContent: "center", children: leadingContent }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Box, { flex: 1, flexDirection: "column", gap: 2, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              Text,
+              {
+                color: getTextColor(),
+                fontSize: sizeStyles.fontSize,
+                fontWeight: "400",
+                lineHeight: sizeStyles.fontSize + 2,
+                children
+              }
+            ),
+            description && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              Text,
+              {
+                color: theme.colors.content.tertiary,
+                fontSize: sizeStyles.descriptionFontSize,
+                lineHeight: sizeStyles.descriptionFontSize + 2,
+                children: description
+              }
+            )
+          ] }),
+          trailing
+        ]
+      }
+    );
+  }
+);
+ContextMenuCheckboxItem.displayName = "ContextMenuCheckboxItem";
+
+// src/ContextMenuRadioGroup.tsx
+var import_react7 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var RadioGroupContext = (0, import_react7.createContext)(null);
+var useRadioGroup = () => (0, import_react7.useContext)(RadioGroupContext);
+var ContextMenuRadioGroup = (0, import_react7.forwardRef)(
+  ({
+    children,
+    value,
+    onValueChange,
+    "data-testid": testId = "context-menu-radio-group"
+  }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(RadioGroupContext.Provider, { value: { value, onValueChange }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Box, { ref, role: "group", flexDirection: "column", "data-testid": testId, children }) });
+  }
+);
+ContextMenuRadioGroup.displayName = "ContextMenuRadioGroup";
+
+// src/ContextMenuRadioItem.tsx
+var import_react8 = require("react");
+var import_xui_core3 = require("@xsolla/xui-core");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var radioSizeMap = {
+  s: 14,
+  m: 16,
+  l: 18,
+  xl: 20
+};
+var radioDotSizeMap = {
+  s: 6,
+  m: 8,
+  l: 8,
+  xl: 10
+};
+var RadioIndicator = ({
+  checked,
+  size,
+  disabled
+}) => {
+  const { theme } = (0, import_xui_core3.useDesignSystem)();
+  const brandColors = theme.colors.control.brand.primary;
+  const faintColors = theme.colors.control.faint;
+  const contentColors = theme.colors.content;
+  const outerSize = radioSizeMap[size];
+  const dotSize = radioDotSizeMap[size];
+  const getBgColor = () => {
+    if (disabled) {
+      return brandColors.bgDisable;
+    }
+    if (checked) {
+      return brandColors.bg;
+    }
+    return faintColors.bg;
+  };
+  const getBorderColor = () => {
+    if (checked && !disabled) {
+      return brandColors.bg;
+    }
+    return faintColors.border;
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    Box,
+    {
+      width: outerSize,
+      height: outerSize,
+      borderRadius: outerSize / 2,
+      borderWidth: checked ? 0 : 1,
+      borderColor: getBorderColor(),
+      backgroundColor: getBgColor(),
+      alignItems: "center",
+      justifyContent: "center",
+      children: checked && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        Box,
+        {
+          width: dotSize,
+          height: dotSize,
+          borderRadius: dotSize / 2,
+          backgroundColor: disabled ? contentColors.tertiary : contentColors.on.brand
+        }
+      )
+    }
+  );
+};
+var ContextMenuRadioItem = (0, import_react8.forwardRef)(
+  ({
+    children,
+    description,
+    value,
+    disabled,
+    size: propSize,
+    onPress,
+    "data-testid": testId = "context-menu-radio-item"
+  }, ref) => {
+    const { theme } = (0, import_xui_core3.useDesignSystem)();
+    const context = useContextMenu();
+    const radioGroup = useRadioGroup();
+    const size = propSize || context?.size || "m";
+    const sizeStyles = theme.sizing.contextMenu(size);
+    const itemRef = (0, import_react8.useRef)(null);
+    const checked = radioGroup?.value === value;
+    (0, import_react8.useEffect)(() => {
+      if (context && !disabled) {
+        const id = typeof children === "string" ? children : String(Math.random());
+        context.registerItem(id);
+        return () => context.unregisterItem(id);
+      }
+    }, [context, disabled, children]);
+    const handlePress = () => {
+      if (disabled) return;
+      radioGroup?.onValueChange(value);
+      onPress?.();
+      if (context) {
+        context.onItemSelect({
+          id: typeof children === "string" ? children : "",
+          label: typeof children === "string" ? children : "",
+          variant: "radio",
+          checked: true
+        });
+      }
+    };
+    const handleKeyDown = (event) => {
+      if (disabled) return;
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        handlePress();
+      }
+    };
+    const getTextColor = () => {
+      if (disabled) {
+        return theme.colors.control.input.textDisable;
+      }
+      return theme.colors.control.input.text;
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+      Box,
+      {
+        ref: ref || itemRef,
+        role: "menuitemradio",
+        "aria-checked": checked,
+        "aria-disabled": disabled || void 0,
+        tabIndex: disabled ? -1 : 0,
+        flexDirection: "row",
+        alignItems: description ? "flex-start" : "center",
+        gap: sizeStyles.gap,
+        paddingHorizontal: sizeStyles.itemPaddingHorizontal,
+        paddingVertical: sizeStyles.itemPaddingVertical,
+        backgroundColor: "transparent",
+        hoverStyle: !disabled ? {
+          backgroundColor: theme.colors.control.input.bgHover
+        } : void 0,
+        pressStyle: !disabled ? {
+          backgroundColor: theme.colors.control.input.bgDisable
+        } : void 0,
+        onPress: handlePress,
+        onKeyDown: handleKeyDown,
+        style: {
+          cursor: disabled ? "not-allowed" : "pointer",
+          opacity: disabled ? 0.5 : 1,
+          outline: "none"
+        },
+        "data-testid": testId,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            Box,
+            {
+              marginTop: description ? 2 : 0,
+              alignItems: "center",
+              justifyContent: "center",
+              children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(RadioIndicator, { checked, size, disabled })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Box, { flex: 1, flexDirection: "column", gap: 2, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              Text,
+              {
+                color: getTextColor(),
+                fontSize: sizeStyles.fontSize,
+                fontWeight: "400",
+                lineHeight: sizeStyles.fontSize + 2,
+                children
+              }
+            ),
+            description && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              Text,
+              {
+                color: theme.colors.content.tertiary,
+                fontSize: sizeStyles.descriptionFontSize,
+                lineHeight: sizeStyles.descriptionFontSize + 2,
+                children: description
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+ContextMenuRadioItem.displayName = "ContextMenuRadioItem";
+
+// src/ContextMenuGroup.tsx
+var import_react9 = require("react");
+var import_xui_core4 = require("@xsolla/xui-core");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var ContextMenuGroup = (0, import_react9.forwardRef)(
+  ({
+    label,
+    description,
+    children,
+    size: propSize,
+    "data-testid": testId = "context-menu-group"
+  }, ref) => {
+    const { theme } = (0, import_xui_core4.useDesignSystem)();
+    const context = useContextMenu();
+    const size = propSize || context?.size || "m";
+    const sizeStyles = theme.sizing.contextMenu(size);
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Box, { ref, role: "group", "aria-label": label, "data-testid": testId, children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+        Box,
+        {
+          paddingHorizontal: sizeStyles.itemPaddingHorizontal,
+          paddingVertical: sizeStyles.itemPaddingVertical,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              Text,
+              {
+                color: theme.colors.content.secondary,
+                fontSize: sizeStyles.descriptionFontSize,
+                fontWeight: "600",
+                style: { textTransform: "uppercase", letterSpacing: 0.5 },
+                children: label
+              }
+            ),
+            description && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              Text,
+              {
+                color: theme.colors.content.tertiary,
+                fontSize: sizeStyles.descriptionFontSize - 2,
+                marginTop: 2,
+                children: description
+              }
+            )
+          ]
+        }
+      ),
+      children
+    ] });
+  }
+);
+ContextMenuGroup.displayName = "ContextMenuGroup";
+
+// src/ContextMenuSeparator.tsx
+var import_xui_core5 = require("@xsolla/xui-core");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var ContextMenuSeparator = ({
+  size: propSize,
+  "data-testid": testId = "context-menu-separator"
+}) => {
+  const { theme } = (0, import_xui_core5.useDesignSystem)();
+  const context = useContextMenu();
+  const size = propSize || context?.size || "m";
+  const sizeStyles = theme.sizing.contextMenu(size);
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    Box,
+    {
+      role: "separator",
+      marginVertical: sizeStyles.paddingVertical,
+      marginHorizontal: sizeStyles.itemPaddingHorizontal,
+      height: 1,
+      backgroundColor: theme.colors.border.secondary,
+      "data-testid": testId
+    }
+  );
+};
+ContextMenuSeparator.displayName = "ContextMenuSeparator";
+
+// src/ContextMenuSearch.tsx
+var import_react10 = __toESM(require("react"));
+var import_xui_core6 = require("@xsolla/xui-core");
+
+// ../icons-base/dist/web/index.mjs
+var import_styled_components = __toESM(require("styled-components"), 1);
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_jsx_runtime60 = require("react/jsx-runtime");
+var import_jsx_runtime61 = require("react/jsx-runtime");
+var import_jsx_runtime62 = require("react/jsx-runtime");
+var import_jsx_runtime63 = require("react/jsx-runtime");
+var import_jsx_runtime64 = require("react/jsx-runtime");
+var import_jsx_runtime65 = require("react/jsx-runtime");
+var import_jsx_runtime66 = require("react/jsx-runtime");
+var import_jsx_runtime67 = require("react/jsx-runtime");
+var import_jsx_runtime68 = require("react/jsx-runtime");
+var import_jsx_runtime69 = require("react/jsx-runtime");
+var import_jsx_runtime70 = require("react/jsx-runtime");
+var import_jsx_runtime71 = require("react/jsx-runtime");
+var import_jsx_runtime72 = require("react/jsx-runtime");
+var import_jsx_runtime73 = require("react/jsx-runtime");
+var import_jsx_runtime74 = require("react/jsx-runtime");
+var import_jsx_runtime75 = require("react/jsx-runtime");
+var import_jsx_runtime76 = require("react/jsx-runtime");
+var import_jsx_runtime77 = require("react/jsx-runtime");
+var import_jsx_runtime78 = require("react/jsx-runtime");
+var import_jsx_runtime79 = require("react/jsx-runtime");
+var import_jsx_runtime80 = require("react/jsx-runtime");
+var import_jsx_runtime81 = require("react/jsx-runtime");
+var import_jsx_runtime82 = require("react/jsx-runtime");
+var import_jsx_runtime83 = require("react/jsx-runtime");
+var import_jsx_runtime84 = require("react/jsx-runtime");
+var import_jsx_runtime85 = require("react/jsx-runtime");
+var import_jsx_runtime86 = require("react/jsx-runtime");
+var import_jsx_runtime87 = require("react/jsx-runtime");
+var import_jsx_runtime88 = require("react/jsx-runtime");
+var import_jsx_runtime89 = require("react/jsx-runtime");
+var import_jsx_runtime90 = require("react/jsx-runtime");
+var import_jsx_runtime91 = require("react/jsx-runtime");
+var import_jsx_runtime92 = require("react/jsx-runtime");
+var import_jsx_runtime93 = require("react/jsx-runtime");
+var import_jsx_runtime94 = require("react/jsx-runtime");
+var import_jsx_runtime95 = require("react/jsx-runtime");
+var import_jsx_runtime96 = require("react/jsx-runtime");
+var import_jsx_runtime97 = require("react/jsx-runtime");
+var import_jsx_runtime98 = require("react/jsx-runtime");
+var import_jsx_runtime99 = require("react/jsx-runtime");
+var import_jsx_runtime100 = require("react/jsx-runtime");
+var import_jsx_runtime101 = require("react/jsx-runtime");
+var import_jsx_runtime102 = require("react/jsx-runtime");
+var import_jsx_runtime103 = require("react/jsx-runtime");
+var import_jsx_runtime104 = require("react/jsx-runtime");
+var import_jsx_runtime105 = require("react/jsx-runtime");
+var import_jsx_runtime106 = require("react/jsx-runtime");
+var import_jsx_runtime107 = require("react/jsx-runtime");
+var import_jsx_runtime108 = require("react/jsx-runtime");
+var import_jsx_runtime109 = require("react/jsx-runtime");
+var import_jsx_runtime110 = require("react/jsx-runtime");
+var import_jsx_runtime111 = require("react/jsx-runtime");
+var import_jsx_runtime112 = require("react/jsx-runtime");
+var import_jsx_runtime113 = require("react/jsx-runtime");
+var import_jsx_runtime114 = require("react/jsx-runtime");
+var import_jsx_runtime115 = require("react/jsx-runtime");
+var import_jsx_runtime116 = require("react/jsx-runtime");
+var import_jsx_runtime117 = require("react/jsx-runtime");
+var import_jsx_runtime118 = require("react/jsx-runtime");
+var import_jsx_runtime119 = require("react/jsx-runtime");
+var import_jsx_runtime120 = require("react/jsx-runtime");
+var import_jsx_runtime121 = require("react/jsx-runtime");
+var import_jsx_runtime122 = require("react/jsx-runtime");
+var import_jsx_runtime123 = require("react/jsx-runtime");
+var import_jsx_runtime124 = require("react/jsx-runtime");
+var import_jsx_runtime125 = require("react/jsx-runtime");
+var import_jsx_runtime126 = require("react/jsx-runtime");
+var import_jsx_runtime127 = require("react/jsx-runtime");
+var StyledIcon = import_styled_components.default.div`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: ${(props) => props.$size}px;
+  height: ${(props) => props.$size}px;
+  color: ${(props) => props.$color};
+
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+`;
+var BaseIcon = ({
+  variant = "line",
+  size = 24,
+  color = "currentColor",
+  solidContent: solidContent114,
+  lineContent: lineContent114,
+  className,
+  style,
+  "data-testid": testId,
+  "aria-label": ariaLabel,
+  "aria-hidden": ariaHidden
+}) => {
+  const svgContent = variant === "line" ? lineContent114 : solidContent114;
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    StyledIcon,
+    {
+      $size: size,
+      $color: color,
+      className,
+      style,
+      "data-testid": testId,
+      role: ariaLabel ? "img" : void 0,
+      "aria-label": ariaLabel,
+      "aria-hidden": ariaHidden != null ? ariaHidden : ariaLabel ? void 0 : true,
+      dangerouslySetInnerHTML: { __html: svgContent }
+    }
+  );
+};
+var solidContent100 = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><g id="icon_search--line"><path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M10 2C14.4183 2 18 5.58172 18 10C18 11.8484 17.3711 13.5488 16.3184 14.9033L21.957 20.543L20.543 21.957L14.9033 16.3174C13.5487 17.3703 11.8486 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2ZM10 4C6.68629 4 4 6.68629 4 10C4 13.3137 6.68629 16 10 16C13.3137 16 16 13.3137 16 10C16 6.68629 13.3137 4 10 4Z" style="fill: currentColor"/></g></svg>`;
+var lineContent100 = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><g id="icon_search--line"><path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M10 2C14.4183 2 18 5.58172 18 10C18 11.8484 17.3711 13.5488 16.3184 14.9033L21.957 20.543L20.543 21.957L14.9033 16.3174C13.5487 17.3703 11.8486 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2ZM10 4C6.68629 4 4 6.68629 4 10C4 13.3137 6.68629 16 10 16C13.3137 16 16 13.3137 16 10C16 6.68629 13.3137 4 10 4Z" style="fill: currentColor"/></g></svg>`;
+var Search = (props) => /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(BaseIcon, { ...props, solidContent: solidContent100, lineContent: lineContent100 });
+
+// src/ContextMenuSearch.tsx
+var import_xui_divider = require("@xsolla/xui-divider");
+var import_jsx_runtime128 = require("react/jsx-runtime");
+var ContextMenuSearch = (0, import_react10.forwardRef)(
+  ({
+    value,
+    onChange,
+    onValueChange,
+    placeholder = "Search",
+    autoFocus = true,
+    size: propSize,
+    "data-testid": testId = "context-menu-search"
+  }, ref) => {
+    const { theme } = (0, import_xui_core6.useDesignSystem)();
+    const context = useContextMenu();
+    const size = propSize || context?.size || "m";
+    const sizeStyles = theme.sizing.contextMenu(size);
+    const inputRef = (0, import_react10.useRef)(null);
+    const inputColors = theme.colors.control.input;
+    import_react10.default.useImperativeHandle(
+      ref,
+      () => inputRef.current,
+      []
+    );
+    (0, import_react10.useEffect)(() => {
+      if (autoFocus && inputRef.current) {
+        setTimeout(() => {
+          inputRef.current?.focus();
+        }, 0);
+      }
+    }, [autoFocus]);
+    const handleChange = (e) => {
+      onChange?.(e);
+      onValueChange?.(e.target.value);
+    };
+    const handleKeyDown = (e) => {
+      e.stopPropagation();
+      if (e.key === "Escape") {
+        context?.closeMenu();
+      }
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(
+      Box,
+      {
+        flexDirection: "column",
+        gap: sizeStyles.searchGap,
+        paddingHorizontal: sizeStyles.searchPaddingHorizontal,
+        paddingVertical: sizeStyles.searchPaddingVertical,
+        "data-testid": testId,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(Box, { flexDirection: "row", alignItems: "center", gap: 8, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+              Icon,
+              {
+                size: sizeStyles.searchIconSize,
+                color: inputColors.placeholder,
+                children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(Search, {})
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(Box, { flex: 1, children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+              InputPrimitive,
+              {
+                ref: inputRef,
+                value,
+                onChange: handleChange,
+                onKeyDown: handleKeyDown,
+                placeholder,
+                fontSize: sizeStyles.searchFontSize,
+                color: inputColors.text,
+                placeholderTextColor: inputColors.placeholder,
+                "aria-label": placeholder,
+                "data-testid": `${testId}__input`,
+                style: {
+                  lineHeight: `${sizeStyles.searchLineHeight}px`
+                }
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_xui_divider.Divider, {})
+        ]
+      }
+    );
+  }
+);
+ContextMenuSearch.displayName = "ContextMenuSearch";
+
+// src/ContextMenu.tsx
+var import_jsx_runtime129 = require("react/jsx-runtime");
+var ContextMenuRoot = (0, import_react11.forwardRef)(
+  ({
+    children,
+    list,
+    groups,
+    size = "m",
+    isOpen: propIsOpen,
+    onOpenChange,
+    position,
+    trigger,
+    width,
+    maxHeight = 300,
+    onSelect,
+    onCheckedChange,
+    closeOnSelect = true,
+    isLoading,
+    "aria-label": ariaLabel,
+    "data-testid": testId = "context-menu"
+  }, ref) => {
+    const { theme } = (0, import_xui_core7.useDesignSystem)();
+    const [internalIsOpen, setInternalIsOpen] = (0, import_react11.useState)(false);
+    const [activeIndex, setActiveIndex] = (0, import_react11.useState)(-1);
+    const containerRef = (0, import_react11.useRef)(null);
+    const menuRef = (0, import_react11.useRef)(null);
+    const itemsRef = (0, import_react11.useRef)([]);
+    const isOpen = propIsOpen !== void 0 ? propIsOpen : internalIsOpen;
+    const sizeStyles = theme.sizing.contextMenu(size);
+    const closeMenu = (0, import_react11.useCallback)(() => {
+      if (propIsOpen === void 0) {
+        setInternalIsOpen(false);
+      }
+      onOpenChange?.(false);
+      setActiveIndex(-1);
+    }, [propIsOpen, onOpenChange]);
+    const toggleMenu = (0, import_react11.useCallback)(() => {
+      const nextOpen = !isOpen;
+      if (propIsOpen === void 0) {
+        setInternalIsOpen(nextOpen);
+      }
+      onOpenChange?.(nextOpen);
+      if (!nextOpen) {
+        setActiveIndex(-1);
+      }
+    }, [isOpen, propIsOpen, onOpenChange]);
+    (0, import_react11.useEffect)(() => {
+      const handleClickOutside = (event) => {
+        if (containerRef.current && !containerRef.current.contains(event.target)) {
+          closeMenu();
+        }
+      };
+      if (isOpen) {
+        document.addEventListener("mousedown", handleClickOutside);
+      }
+      return () => {
+        document.removeEventListener("mousedown", handleClickOutside);
+      };
+    }, [isOpen, closeMenu]);
+    (0, import_react11.useEffect)(() => {
+      const handleEscape = (event) => {
+        if (event.key === "Escape") {
+          closeMenu();
+        }
+      };
+      if (isOpen) {
+        document.addEventListener("keydown", handleEscape);
+      }
+      return () => {
+        document.removeEventListener("keydown", handleEscape);
+      };
+    }, [isOpen, closeMenu]);
+    (0, import_react11.useEffect)(() => {
+      if (isOpen && menuRef.current) {
+        menuRef.current.focus();
+      }
+    }, [isOpen]);
+    (0, import_react11.useEffect)(() => {
+      if (!isOpen) {
+        itemsRef.current = [];
+      }
+    }, [isOpen]);
+    const registerItem = (0, import_react11.useCallback)((id) => {
+      const index = itemsRef.current.indexOf(id);
+      if (index === -1) {
+        itemsRef.current.push(id);
+        return itemsRef.current.length - 1;
+      }
+      return index;
+    }, []);
+    const unregisterItem = (0, import_react11.useCallback)((id) => {
+      const index = itemsRef.current.indexOf(id);
+      if (index !== -1) {
+        itemsRef.current.splice(index, 1);
+      }
+    }, []);
+    const onItemSelect = (0, import_react11.useCallback)(
+      (item) => {
+        onSelect?.(item);
+        if (item.variant === "checkbox") {
+          onCheckedChange?.(item.id, !item.checked);
+        } else if (item.variant === "radio") {
+          onCheckedChange?.(item.id, true);
+          if (closeOnSelect) {
+            closeMenu();
+          }
+        } else if (closeOnSelect) {
+          closeMenu();
+        }
+      },
+      [onSelect, onCheckedChange, closeOnSelect, closeMenu]
+    );
+    const handleKeyDown = (0, import_react11.useCallback)(
+      (event) => {
+        const itemCount = itemsRef.current.length;
+        if (itemCount === 0) return;
+        switch (event.key) {
+          case "ArrowDown":
+            event.preventDefault();
+            setActiveIndex((prev) => prev < itemCount - 1 ? prev + 1 : 0);
+            break;
+          case "ArrowUp":
+            event.preventDefault();
+            setActiveIndex((prev) => prev > 0 ? prev - 1 : itemCount - 1);
+            break;
+          case "Home":
+            event.preventDefault();
+            setActiveIndex(0);
+            break;
+          case "End":
+            event.preventDefault();
+            setActiveIndex(itemCount - 1);
+            break;
+          case "Enter":
+          case " ":
+            event.preventDefault();
+            break;
+          case "Tab":
+            closeMenu();
+            break;
+        }
+      },
+      [closeMenu]
+    );
+    const contextValue = (0, import_react11.useMemo)(
+      () => ({
+        size,
+        closeMenu,
+        onItemSelect,
+        activeIndex,
+        setActiveIndex,
+        registerItem,
+        unregisterItem
+      }),
+      [size, closeMenu, onItemSelect, activeIndex, registerItem, unregisterItem]
+    );
+    const getPositionStyles = () => {
+      if (position) {
+        return {
+          position: "fixed",
+          left: position.x,
+          top: position.y
+        };
+      }
+      return {
+        position: "absolute",
+        top: "100%",
+        left: 0,
+        marginTop: 4
+      };
+    };
+    const renderItems = (itemsData) => {
+      return itemsData.map((item, index) => {
+        const commonProps = {
+          key: item.id || index,
+          disabled: item.disabled,
+          description: item.description,
+          "data-testid": `context-menu-item-${item.id || index}`
+        };
+        if (item.variant === "checkbox") {
+          return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+            ContextMenuCheckboxItem,
+            {
+              ...commonProps,
+              checked: item.checked,
+              onCheckedChange: (checked) => onCheckedChange?.(item.id, checked),
+              onPress: item.onPress,
+              children: item.label
+            }
+          );
+        }
+        if (item.variant === "radio") {
+          return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+            ContextMenuRadioItem,
+            {
+              ...commonProps,
+              value: item.id,
+              onPress: item.onPress,
+              children: item.label
+            }
+          );
+        }
+        return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+          ContextMenuItem,
+          {
+            ...commonProps,
+            icon: item.icon,
+            selected: item.selected,
+            shortcut: item.trailing?.type === "shortcut" ? item.trailing.content : void 0,
+            trailing: item.trailing?.type !== "shortcut" && item.trailing?.type !== "none" ? item.trailing?.content : void 0,
+            hasSubmenu: item.children && item.children.length > 0,
+            onPress: item.onPress,
+            active: activeIndex === index,
+            children: item.label
+          }
+        );
+      });
+    };
+    const renderGroups = (groupsData) => {
+      return groupsData.map((group, groupIndex) => /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(import_react11.default.Fragment, { children: [
+        groupIndex > 0 && /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(ContextMenuSeparator, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+          ContextMenuGroup,
+          {
+            label: group.label,
+            description: group.description,
+            "data-testid": `context-menu-group-${group.id || groupIndex}`,
+            children: renderItems(group.items)
+          }
+        )
+      ] }, group.id || groupIndex));
+    };
+    const renderContent = () => {
+      if (isLoading) {
+        const brandColor = theme.colors.control.brand.primary.bg;
+        return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+          Box,
+          {
+            padding: 16,
+            alignItems: "center",
+            justifyContent: "center",
+            minHeight: 60,
+            children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_xui_spinner.Spinner, { size: "m", color: brandColor })
+          }
+        );
+      }
+      if (children) {
+        return children;
+      }
+      if (groups && groups.length > 0) {
+        return renderGroups(groups);
+      }
+      if (list && list.length > 0) {
+        return renderItems(list);
+      }
+      return null;
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(ContextMenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(
+      "div",
+      {
+        ref: containerRef,
+        style: {
+          position: position ? "static" : "relative",
+          width: trigger ? "fit-content" : void 0,
+          display: "inline-block"
+        },
+        "data-testid": testId,
+        children: [
+          trigger && /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+            "div",
+            {
+              onClick: toggleMenu,
+              style: { cursor: "pointer" },
+              "data-testid": `${testId}-trigger`,
+              children: trigger
+            }
+          ),
+          isOpen && /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+            Box,
+            {
+              ref: (node) => {
+                menuRef.current = node;
+                if (typeof ref === "function") {
+                  ref(node);
+                } else if (ref) {
+                  ref.current = node;
+                }
+              },
+              role: "menu",
+              "aria-label": ariaLabel,
+              backgroundColor: theme.colors.background.secondary,
+              borderColor: theme.colors.border.secondary,
+              borderWidth: 1,
+              borderRadius: theme.radius.button,
+              paddingVertical: sizeStyles.paddingVertical,
+              width,
+              minWidth: sizeStyles.minWidth,
+              style: {
+                ...getPositionStyles(),
+                zIndex: 1e3,
+                boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
+                maxHeight,
+                overflowY: "auto",
+                outline: "none"
+              },
+              tabIndex: -1,
+              onKeyDown: handleKeyDown,
+              "data-testid": `${testId}-content`,
+              children: renderContent()
+            }
+          )
+        ]
+      }
+    ) });
+  }
+);
+ContextMenuRoot.displayName = "ContextMenu";
+var ContextMenu = Object.assign(ContextMenuRoot, {
+  Item: ContextMenuItem,
+  CheckboxItem: ContextMenuCheckboxItem,
+  RadioGroup: ContextMenuRadioGroup,
+  RadioItem: ContextMenuRadioItem,
+  Group: ContextMenuGroup,
+  Separator: ContextMenuSeparator,
+  Search: ContextMenuSearch
+});
+
+// src/hooks/useContextMenuPosition.ts
+var import_react12 = require("react");
+var useContextMenuPosition = ({
+  position,
+  menuRef,
+  isOpen,
+  offset = 8
+}) => {
+  const [adjustedPosition, setAdjustedPosition] = (0, import_react12.useState)();
+  (0, import_react12.useEffect)(() => {
+    if (!isOpen || !position || !menuRef.current) {
+      setAdjustedPosition(void 0);
+      return;
+    }
+    const rafId = requestAnimationFrame(() => {
+      const menu = menuRef.current;
+      if (!menu) return;
+      const rect = menu.getBoundingClientRect();
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+      let { x, y } = position;
+      let transformOriginX = "left";
+      let transformOriginY = "top";
+      if (x + rect.width > viewportWidth - offset) {
+        x = Math.max(offset, viewportWidth - rect.width - offset);
+        transformOriginX = "right";
+      }
+      if (x < offset) {
+        x = offset;
+        transformOriginX = "left";
+      }
+      if (y + rect.height > viewportHeight - offset) {
+        const aboveY = position.y - rect.height;
+        if (aboveY >= offset) {
+          y = aboveY;
+          transformOriginY = "bottom";
+        } else {
+          y = Math.max(offset, viewportHeight - rect.height - offset);
+          transformOriginY = "bottom";
+        }
+      }
+      if (y < offset) {
+        y = offset;
+        transformOriginY = "top";
+      }
+      setAdjustedPosition({
+        x,
+        y,
+        transformOrigin: `${transformOriginY} ${transformOriginX}`
+      });
+    });
+    return () => cancelAnimationFrame(rafId);
+  }, [isOpen, position, menuRef, offset]);
+  return adjustedPosition;
+};
+
+// src/hooks/useKeyboardNavigation.ts
+var import_react13 = require("react");
+var useKeyboardNavigation = ({
+  isOpen,
+  itemCount,
+  activeIndex,
+  setActiveIndex,
+  onSelect,
+  onClose,
+  loop = true
+}) => {
+  const typeaheadBuffer = (0, import_react13.useRef)("");
+  const typeaheadTimeout = (0, import_react13.useRef)(null);
+  (0, import_react13.useEffect)(() => {
+    if (!isOpen) {
+      typeaheadBuffer.current = "";
+      if (typeaheadTimeout.current) {
+        clearTimeout(typeaheadTimeout.current);
+      }
+    }
+  }, [isOpen]);
+  const handleKeyDown = (0, import_react13.useCallback)(
+    (event) => {
+      if (!isOpen || itemCount === 0) return;
+      switch (event.key) {
+        case "ArrowDown":
+          event.preventDefault();
+          if (loop) {
+            setActiveIndex(activeIndex < itemCount - 1 ? activeIndex + 1 : 0);
+          } else {
+            setActiveIndex(Math.min(activeIndex + 1, itemCount - 1));
+          }
+          break;
+        case "ArrowUp":
+          event.preventDefault();
+          if (loop) {
+            setActiveIndex(activeIndex > 0 ? activeIndex - 1 : itemCount - 1);
+          } else {
+            setActiveIndex(Math.max(activeIndex - 1, 0));
+          }
+          break;
+        case "Home":
+          event.preventDefault();
+          setActiveIndex(0);
+          break;
+        case "End":
+          event.preventDefault();
+          setActiveIndex(itemCount - 1);
+          break;
+        case "Enter":
+        case " ":
+          event.preventDefault();
+          if (activeIndex >= 0 && activeIndex < itemCount) {
+            onSelect(activeIndex);
+          }
+          break;
+        case "Escape":
+          event.preventDefault();
+          onClose();
+          break;
+        case "Tab":
+          onClose();
+          break;
+        default:
+          if (event.key.length === 1 && !event.ctrlKey && !event.metaKey) {
+            typeaheadBuffer.current += event.key.toLowerCase();
+            if (typeaheadTimeout.current) {
+              clearTimeout(typeaheadTimeout.current);
+            }
+            typeaheadTimeout.current = setTimeout(() => {
+              typeaheadBuffer.current = "";
+            }, 500);
+          }
+          break;
+      }
+    },
+    [isOpen, itemCount, activeIndex, setActiveIndex, onSelect, onClose, loop]
+  );
+  return { handleKeyDown };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ContextMenu,
+  ContextMenuCheckboxItem,
+  ContextMenuGroup,
+  ContextMenuItem,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuSearch,
+  ContextMenuSeparator,
+  useContextMenu,
+  useContextMenuPosition,
+  useContextMenuRequired,
+  useKeyboardNavigation,
+  useRadioGroup
+});
+//# sourceMappingURL=index.js.map