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

package/native/index.mjs

@@ -0,0 +1,1886 @@
+// src/ContextMenu.tsx
+import React10, {
+  forwardRef as forwardRef9,
+  useState,
+  useRef as useRef5,
+  useEffect as useEffect5,
+  useCallback,
+  useMemo
+} from "react";
+
+// ../primitives-native/src/Box.tsx
+import {
+  View,
+  Pressable,
+  Image
+} from "react-native";
+import { jsx } from "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__ */ jsx(
+      Image,
+      {
+        source: { uri: src },
+        style: imageStyle,
+        testID: finalTestID,
+        resizeMode: "cover",
+        ...nativeRest
+      }
+    );
+  }
+  if (onPress) {
+    return /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        onPress,
+        onLayout,
+        onMoveShouldSetResponder,
+        onResponderGrant,
+        onResponderMove,
+        onResponderRelease,
+        onResponderTerminate,
+        style: ({ pressed }) => getContainerStyle(pressed),
+        testID: finalTestID,
+        ...nativeRest,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      style: getContainerStyle(),
+      testID: finalTestID,
+      onLayout,
+      onMoveShouldSetResponder,
+      onResponderGrant,
+      onResponderMove,
+      onResponderRelease,
+      onResponderTerminate,
+      ...nativeRest,
+      children
+    }
+  );
+};
+
+// ../primitives-native/src/Text.tsx
+import { Text as RNText } from "react-native";
+import { jsx as jsx2 } from "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__ */ jsx2(RNText, { style, testID: id, accessibilityRole, children });
+};
+
+// ../primitives-native/src/Spinner.tsx
+import { ActivityIndicator, View as View2 } from "react-native";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Spinner = ({
+  color,
+  size,
+  role,
+  "aria-label": ariaLabel,
+  "aria-live": ariaLive,
+  "aria-describedby": ariaDescribedBy,
+  testID
+}) => {
+  return /* @__PURE__ */ jsx3(
+    View2,
+    {
+      accessible: true,
+      accessibilityRole: role === "status" ? "none" : void 0,
+      accessibilityLabel: ariaLabel,
+      accessibilityLiveRegion: ariaLive === "polite" ? "polite" : ariaLive === "assertive" ? "assertive" : "none",
+      testID,
+      children: /* @__PURE__ */ jsx3(
+        ActivityIndicator,
+        {
+          color,
+          size: typeof size === "number" ? size : "small"
+        }
+      )
+    }
+  );
+};
+Spinner.displayName = "Spinner";
+
+// ../primitives-native/src/Icon.tsx
+import React from "react";
+import { View as View3 } from "react-native";
+import { jsx as jsx4 } from "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 = React.Children.map(children, (child) => {
+    if (React.isValidElement(child)) {
+      return React.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__ */ jsx4(View3, { style, children: childrenWithProps });
+};
+
+// ../primitives-native/src/Divider.tsx
+import { View as View4 } from "react-native";
+import { jsx as jsx5 } from "react/jsx-runtime";
+
+// ../primitives-native/src/Input.tsx
+import { forwardRef } from "react";
+import { TextInput as RNTextInput } from "react-native";
+import { jsx as jsx6 } from "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 = 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__ */ jsx6(
+      RNTextInput,
+      {
+        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
+import { forwardRef as forwardRef2 } from "react";
+import { TextInput as RNTextInput2 } from "react-native";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var TextAreaPrimitive = forwardRef2(
+  ({
+    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__ */ jsx7(
+      RNTextInput2,
+      {
+        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
+import { useDesignSystem as useDesignSystem7 } from "@xsolla/xui-core";
+import { Spinner as Spinner2 } from "@xsolla/xui-spinner";
+
+// src/ContextMenuContext.tsx
+import { createContext, useContext } from "react";
+var ContextMenuContext = createContext(void 0);
+var useContextMenu = () => {
+  const context = useContext(ContextMenuContext);
+  return context;
+};
+var useContextMenuRequired = () => {
+  const context = useContext(ContextMenuContext);
+  if (!context) {
+    throw new Error(
+      "useContextMenuRequired must be used within a ContextMenu component"
+    );
+  }
+  return context;
+};
+
+// src/ContextMenuItem.tsx
+import { forwardRef as forwardRef3, useEffect, useRef } from "react";
+import { useDesignSystem } from "@xsolla/xui-core";
+import { ArrowRight } from "@xsolla/xui-icons";
+import { jsx as jsx8, jsxs } from "react/jsx-runtime";
+var ContextMenuItem = forwardRef3(
+  ({
+    children,
+    description,
+    icon,
+    trailing,
+    shortcut,
+    selected,
+    disabled,
+    active,
+    size: propSize,
+    hasSubmenu,
+    onPress,
+    "data-testid": testId = "context-menu-item"
+  }, ref) => {
+    const { theme } = useDesignSystem();
+    const context = useContextMenu();
+    const size = propSize || context?.size || "m";
+    const sizeStyles = theme.sizing.contextMenu(size);
+    const itemRef = useRef(null);
+    const brandColors = theme.colors.control.brand.primary;
+    const contentColors = theme.colors.content;
+    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__ */ 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__ */ jsx8(
+            Box,
+            {
+              width: sizeStyles.iconSize,
+              marginTop: description ? 2 : 0,
+              alignItems: "center",
+              justifyContent: "center",
+              children: /* @__PURE__ */ jsx8(Icon, { size: sizeStyles.iconSize, color: getIconColor(), children: icon })
+            }
+          ),
+          /* @__PURE__ */ jsxs(Box, { flex: 1, flexDirection: "column", gap: 2, children: [
+            /* @__PURE__ */ jsx8(
+              Text,
+              {
+                color: getTextColor(),
+                fontSize: sizeStyles.fontSize,
+                fontWeight: "400",
+                lineHeight: sizeStyles.fontSize + 2,
+                children
+              }
+            ),
+            description && /* @__PURE__ */ jsx8(
+              Text,
+              {
+                color: selected ? contentColors.on.brand : theme.colors.content.tertiary,
+                fontSize: sizeStyles.descriptionFontSize,
+                lineHeight: sizeStyles.descriptionFontSize + 2,
+                children: description
+              }
+            )
+          ] }),
+          shortcut && /* @__PURE__ */ jsx8(
+            Text,
+            {
+              color: selected ? contentColors.on.brand : theme.colors.content.tertiary,
+              fontSize: sizeStyles.descriptionFontSize,
+              children: shortcut
+            }
+          ),
+          trailing,
+          hasSubmenu && /* @__PURE__ */ jsx8(
+            Icon,
+            {
+              size: sizeStyles.iconSize - 4,
+              color: selected ? contentColors.on.brand : theme.colors.content.secondary,
+              children: /* @__PURE__ */ jsx8(ArrowRight, {})
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+ContextMenuItem.displayName = "ContextMenuItem";
+
+// src/ContextMenuCheckboxItem.tsx
+import { forwardRef as forwardRef4, useEffect as useEffect2, useRef as useRef2 } from "react";
+import { useDesignSystem as useDesignSystem2 } from "@xsolla/xui-core";
+import { Check, Minus } from "@xsolla/xui-icons";
+import { jsx as jsx9, jsxs as jsxs2 } from "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 } = useDesignSystem2();
+  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__ */ jsx9(
+    Box,
+    {
+      width: boxSize,
+      height: boxSize,
+      borderRadius: 4,
+      borderWidth: isActive ? 0 : 1,
+      borderColor: getBorderColor(),
+      backgroundColor: getBgColor(),
+      alignItems: "center",
+      justifyContent: "center",
+      children: indeterminate ? /* @__PURE__ */ jsx9(
+        Icon,
+        {
+          size: iconSize,
+          color: disabled ? contentColors.tertiary : contentColors.on.brand,
+          children: /* @__PURE__ */ jsx9(Minus, {})
+        }
+      ) : checked ? /* @__PURE__ */ jsx9(
+        Icon,
+        {
+          size: iconSize,
+          color: disabled ? contentColors.tertiary : contentColors.on.brand,
+          children: /* @__PURE__ */ jsx9(Check, {})
+        }
+      ) : null
+    }
+  );
+};
+var ContextMenuCheckboxItem = forwardRef4(
+  ({
+    children,
+    description,
+    leadingContent,
+    trailing,
+    checked = false,
+    indeterminate = false,
+    disabled,
+    size: propSize,
+    onCheckedChange,
+    onPress,
+    "data-testid": testId = "context-menu-checkbox-item"
+  }, ref) => {
+    const { theme } = useDesignSystem2();
+    const context = useContextMenu();
+    const size = propSize || context?.size || "m";
+    const sizeStyles = theme.sizing.contextMenu(size);
+    const itemRef = useRef2(null);
+    const contentColors = theme.colors.content;
+    useEffect2(() => {
+      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__ */ jsxs2(
+      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__ */ jsx9(
+            Box,
+            {
+              marginTop: description ? 2 : 0,
+              alignItems: "center",
+              justifyContent: "center",
+              children: /* @__PURE__ */ jsx9(
+                CheckboxIndicator,
+                {
+                  checked,
+                  indeterminate,
+                  size,
+                  disabled
+                }
+              )
+            }
+          ),
+          leadingContent && /* @__PURE__ */ jsx9(Box, { padding: 5, alignItems: "center", justifyContent: "center", children: leadingContent }),
+          /* @__PURE__ */ jsxs2(Box, { flex: 1, flexDirection: "column", gap: 2, children: [
+            /* @__PURE__ */ jsx9(
+              Text,
+              {
+                color: getTextColor(),
+                fontSize: sizeStyles.fontSize,
+                fontWeight: "400",
+                lineHeight: sizeStyles.fontSize + 2,
+                children
+              }
+            ),
+            description && /* @__PURE__ */ jsx9(
+              Text,
+              {
+                color: theme.colors.content.tertiary,
+                fontSize: sizeStyles.descriptionFontSize,
+                lineHeight: sizeStyles.descriptionFontSize + 2,
+                children: description
+              }
+            )
+          ] }),
+          trailing
+        ]
+      }
+    );
+  }
+);
+ContextMenuCheckboxItem.displayName = "ContextMenuCheckboxItem";
+
+// src/ContextMenuRadioGroup.tsx
+import { createContext as createContext2, useContext as useContext2, forwardRef as forwardRef5 } from "react";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var RadioGroupContext = createContext2(null);
+var useRadioGroup = () => useContext2(RadioGroupContext);
+var ContextMenuRadioGroup = forwardRef5(
+  ({
+    children,
+    value,
+    onValueChange,
+    "data-testid": testId = "context-menu-radio-group"
+  }, ref) => {
+    return /* @__PURE__ */ jsx10(RadioGroupContext.Provider, { value: { value, onValueChange }, children: /* @__PURE__ */ jsx10(Box, { ref, role: "group", flexDirection: "column", "data-testid": testId, children }) });
+  }
+);
+ContextMenuRadioGroup.displayName = "ContextMenuRadioGroup";
+
+// src/ContextMenuRadioItem.tsx
+import { forwardRef as forwardRef6, useEffect as useEffect3, useRef as useRef3 } from "react";
+import { useDesignSystem as useDesignSystem3 } from "@xsolla/xui-core";
+import { jsx as jsx11, jsxs as jsxs3 } from "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 } = useDesignSystem3();
+  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__ */ jsx11(
+    Box,
+    {
+      width: outerSize,
+      height: outerSize,
+      borderRadius: outerSize / 2,
+      borderWidth: checked ? 0 : 1,
+      borderColor: getBorderColor(),
+      backgroundColor: getBgColor(),
+      alignItems: "center",
+      justifyContent: "center",
+      children: checked && /* @__PURE__ */ jsx11(
+        Box,
+        {
+          width: dotSize,
+          height: dotSize,
+          borderRadius: dotSize / 2,
+          backgroundColor: disabled ? contentColors.tertiary : contentColors.on.brand
+        }
+      )
+    }
+  );
+};
+var ContextMenuRadioItem = forwardRef6(
+  ({
+    children,
+    description,
+    value,
+    disabled,
+    size: propSize,
+    onPress,
+    "data-testid": testId = "context-menu-radio-item"
+  }, ref) => {
+    const { theme } = useDesignSystem3();
+    const context = useContextMenu();
+    const radioGroup = useRadioGroup();
+    const size = propSize || context?.size || "m";
+    const sizeStyles = theme.sizing.contextMenu(size);
+    const itemRef = useRef3(null);
+    const checked = radioGroup?.value === value;
+    useEffect3(() => {
+      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__ */ jsxs3(
+      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__ */ jsx11(
+            Box,
+            {
+              marginTop: description ? 2 : 0,
+              alignItems: "center",
+              justifyContent: "center",
+              children: /* @__PURE__ */ jsx11(RadioIndicator, { checked, size, disabled })
+            }
+          ),
+          /* @__PURE__ */ jsxs3(Box, { flex: 1, flexDirection: "column", gap: 2, children: [
+            /* @__PURE__ */ jsx11(
+              Text,
+              {
+                color: getTextColor(),
+                fontSize: sizeStyles.fontSize,
+                fontWeight: "400",
+                lineHeight: sizeStyles.fontSize + 2,
+                children
+              }
+            ),
+            description && /* @__PURE__ */ jsx11(
+              Text,
+              {
+                color: theme.colors.content.tertiary,
+                fontSize: sizeStyles.descriptionFontSize,
+                lineHeight: sizeStyles.descriptionFontSize + 2,
+                children: description
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+ContextMenuRadioItem.displayName = "ContextMenuRadioItem";
+
+// src/ContextMenuGroup.tsx
+import { forwardRef as forwardRef7 } from "react";
+import { useDesignSystem as useDesignSystem4 } from "@xsolla/xui-core";
+import { jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
+var ContextMenuGroup = forwardRef7(
+  ({
+    label,
+    description,
+    children,
+    size: propSize,
+    "data-testid": testId = "context-menu-group"
+  }, ref) => {
+    const { theme } = useDesignSystem4();
+    const context = useContextMenu();
+    const size = propSize || context?.size || "m";
+    const sizeStyles = theme.sizing.contextMenu(size);
+    return /* @__PURE__ */ jsxs4(Box, { ref, role: "group", "aria-label": label, "data-testid": testId, children: [
+      label && /* @__PURE__ */ jsxs4(
+        Box,
+        {
+          paddingHorizontal: sizeStyles.itemPaddingHorizontal,
+          paddingVertical: sizeStyles.itemPaddingVertical,
+          children: [
+            /* @__PURE__ */ jsx12(
+              Text,
+              {
+                color: theme.colors.content.secondary,
+                fontSize: sizeStyles.descriptionFontSize,
+                fontWeight: "600",
+                style: { textTransform: "uppercase", letterSpacing: 0.5 },
+                children: label
+              }
+            ),
+            description && /* @__PURE__ */ jsx12(
+              Text,
+              {
+                color: theme.colors.content.tertiary,
+                fontSize: sizeStyles.descriptionFontSize - 2,
+                marginTop: 2,
+                children: description
+              }
+            )
+          ]
+        }
+      ),
+      children
+    ] });
+  }
+);
+ContextMenuGroup.displayName = "ContextMenuGroup";
+
+// src/ContextMenuSeparator.tsx
+import { useDesignSystem as useDesignSystem5 } from "@xsolla/xui-core";
+import { jsx as jsx13 } from "react/jsx-runtime";
+var ContextMenuSeparator = ({
+  size: propSize,
+  "data-testid": testId = "context-menu-separator"
+}) => {
+  const { theme } = useDesignSystem5();
+  const context = useContextMenu();
+  const size = propSize || context?.size || "m";
+  const sizeStyles = theme.sizing.contextMenu(size);
+  return /* @__PURE__ */ jsx13(
+    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
+import React9, { forwardRef as forwardRef8, useRef as useRef4, useEffect as useEffect4 } from "react";
+import { useDesignSystem as useDesignSystem6 } from "@xsolla/xui-core";
+
+// ../icons-base/dist/web/index.mjs
+import styled from "styled-components";
+import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx42 } from "react/jsx-runtime";
+import { jsx as jsx52 } from "react/jsx-runtime";
+import { jsx as jsx62 } from "react/jsx-runtime";
+import { jsx as jsx72 } from "react/jsx-runtime";
+import { jsx as jsx82 } from "react/jsx-runtime";
+import { jsx as jsx92 } from "react/jsx-runtime";
+import { jsx as jsx102 } from "react/jsx-runtime";
+import { jsx as jsx112 } from "react/jsx-runtime";
+import { jsx as jsx122 } from "react/jsx-runtime";
+import { jsx as jsx132 } from "react/jsx-runtime";
+import { jsx as jsx142 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx222 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx322 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx36 } from "react/jsx-runtime";
+import { jsx as jsx37 } from "react/jsx-runtime";
+import { jsx as jsx38 } from "react/jsx-runtime";
+import { jsx as jsx39 } from "react/jsx-runtime";
+import { jsx as jsx40 } from "react/jsx-runtime";
+import { jsx as jsx41 } from "react/jsx-runtime";
+import { jsx as jsx422 } from "react/jsx-runtime";
+import { jsx as jsx43 } from "react/jsx-runtime";
+import { jsx as jsx44 } from "react/jsx-runtime";
+import { jsx as jsx45 } from "react/jsx-runtime";
+import { jsx as jsx46 } from "react/jsx-runtime";
+import { jsx as jsx47 } from "react/jsx-runtime";
+import { jsx as jsx48 } from "react/jsx-runtime";
+import { jsx as jsx49 } from "react/jsx-runtime";
+import { jsx as jsx50 } from "react/jsx-runtime";
+import { jsx as jsx51 } from "react/jsx-runtime";
+import { jsx as jsx522 } from "react/jsx-runtime";
+import { jsx as jsx53 } from "react/jsx-runtime";
+import { jsx as jsx54 } from "react/jsx-runtime";
+import { jsx as jsx55 } from "react/jsx-runtime";
+import { jsx as jsx56 } from "react/jsx-runtime";
+import { jsx as jsx57 } from "react/jsx-runtime";
+import { jsx as jsx58 } from "react/jsx-runtime";
+import { jsx as jsx59 } from "react/jsx-runtime";
+import { jsx as jsx60 } from "react/jsx-runtime";
+import { jsx as jsx61 } from "react/jsx-runtime";
+import { jsx as jsx622 } from "react/jsx-runtime";
+import { jsx as jsx63 } from "react/jsx-runtime";
+import { jsx as jsx64 } from "react/jsx-runtime";
+import { jsx as jsx65 } from "react/jsx-runtime";
+import { jsx as jsx66 } from "react/jsx-runtime";
+import { jsx as jsx67 } from "react/jsx-runtime";
+import { jsx as jsx68 } from "react/jsx-runtime";
+import { jsx as jsx69 } from "react/jsx-runtime";
+import { jsx as jsx70 } from "react/jsx-runtime";
+import { jsx as jsx71 } from "react/jsx-runtime";
+import { jsx as jsx722 } from "react/jsx-runtime";
+import { jsx as jsx73 } from "react/jsx-runtime";
+import { jsx as jsx74 } from "react/jsx-runtime";
+import { jsx as jsx75 } from "react/jsx-runtime";
+import { jsx as jsx76 } from "react/jsx-runtime";
+import { jsx as jsx77 } from "react/jsx-runtime";
+import { jsx as jsx78 } from "react/jsx-runtime";
+import { jsx as jsx79 } from "react/jsx-runtime";
+import { jsx as jsx80 } from "react/jsx-runtime";
+import { jsx as jsx81 } from "react/jsx-runtime";
+import { jsx as jsx822 } from "react/jsx-runtime";
+import { jsx as jsx83 } from "react/jsx-runtime";
+import { jsx as jsx84 } from "react/jsx-runtime";
+import { jsx as jsx85 } from "react/jsx-runtime";
+import { jsx as jsx86 } from "react/jsx-runtime";
+import { jsx as jsx87 } from "react/jsx-runtime";
+import { jsx as jsx88 } from "react/jsx-runtime";
+import { jsx as jsx89 } from "react/jsx-runtime";
+import { jsx as jsx90 } from "react/jsx-runtime";
+import { jsx as jsx91 } from "react/jsx-runtime";
+import { jsx as jsx922 } from "react/jsx-runtime";
+import { jsx as jsx93 } from "react/jsx-runtime";
+import { jsx as jsx94 } from "react/jsx-runtime";
+import { jsx as jsx95 } from "react/jsx-runtime";
+import { jsx as jsx96 } from "react/jsx-runtime";
+import { jsx as jsx97 } from "react/jsx-runtime";
+import { jsx as jsx98 } from "react/jsx-runtime";
+import { jsx as jsx99 } from "react/jsx-runtime";
+import { jsx as jsx100 } from "react/jsx-runtime";
+import { jsx as jsx101 } from "react/jsx-runtime";
+import { jsx as jsx1022 } from "react/jsx-runtime";
+import { jsx as jsx103 } from "react/jsx-runtime";
+import { jsx as jsx104 } from "react/jsx-runtime";
+import { jsx as jsx105 } from "react/jsx-runtime";
+import { jsx as jsx106 } from "react/jsx-runtime";
+import { jsx as jsx107 } from "react/jsx-runtime";
+import { jsx as jsx108 } from "react/jsx-runtime";
+import { jsx as jsx109 } from "react/jsx-runtime";
+import { jsx as jsx110 } from "react/jsx-runtime";
+import { jsx as jsx111 } from "react/jsx-runtime";
+import { jsx as jsx1122 } from "react/jsx-runtime";
+import { jsx as jsx113 } from "react/jsx-runtime";
+import { jsx as jsx114 } from "react/jsx-runtime";
+var StyledIcon = styled.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__ */ jsx14(
+    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__ */ jsx101(BaseIcon, { ...props, solidContent: solidContent100, lineContent: lineContent100 });
+
+// src/ContextMenuSearch.tsx
+import { Divider } from "@xsolla/xui-divider";
+import { jsx as jsx115, jsxs as jsxs5 } from "react/jsx-runtime";
+var ContextMenuSearch = forwardRef8(
+  ({
+    value,
+    onChange,
+    onValueChange,
+    placeholder = "Search",
+    autoFocus = true,
+    size: propSize,
+    "data-testid": testId = "context-menu-search"
+  }, ref) => {
+    const { theme } = useDesignSystem6();
+    const context = useContextMenu();
+    const size = propSize || context?.size || "m";
+    const sizeStyles = theme.sizing.contextMenu(size);
+    const inputRef = useRef4(null);
+    const inputColors = theme.colors.control.input;
+    React9.useImperativeHandle(
+      ref,
+      () => inputRef.current,
+      []
+    );
+    useEffect4(() => {
+      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__ */ jsxs5(
+      Box,
+      {
+        flexDirection: "column",
+        gap: sizeStyles.searchGap,
+        paddingHorizontal: sizeStyles.searchPaddingHorizontal,
+        paddingVertical: sizeStyles.searchPaddingVertical,
+        "data-testid": testId,
+        children: [
+          /* @__PURE__ */ jsxs5(Box, { flexDirection: "row", alignItems: "center", gap: 8, children: [
+            /* @__PURE__ */ jsx115(
+              Icon,
+              {
+                size: sizeStyles.searchIconSize,
+                color: inputColors.placeholder,
+                children: /* @__PURE__ */ jsx115(Search, {})
+              }
+            ),
+            /* @__PURE__ */ jsx115(Box, { flex: 1, children: /* @__PURE__ */ jsx115(
+              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__ */ jsx115(Divider, {})
+        ]
+      }
+    );
+  }
+);
+ContextMenuSearch.displayName = "ContextMenuSearch";
+
+// src/ContextMenu.tsx
+import { jsx as jsx116, jsxs as jsxs6 } from "react/jsx-runtime";
+var ContextMenuRoot = forwardRef9(
+  ({
+    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 } = useDesignSystem7();
+    const [internalIsOpen, setInternalIsOpen] = useState(false);
+    const [activeIndex, setActiveIndex] = useState(-1);
+    const containerRef = useRef5(null);
+    const menuRef = useRef5(null);
+    const itemsRef = useRef5([]);
+    const isOpen = propIsOpen !== void 0 ? propIsOpen : internalIsOpen;
+    const sizeStyles = theme.sizing.contextMenu(size);
+    const closeMenu = useCallback(() => {
+      if (propIsOpen === void 0) {
+        setInternalIsOpen(false);
+      }
+      onOpenChange?.(false);
+      setActiveIndex(-1);
+    }, [propIsOpen, onOpenChange]);
+    const toggleMenu = useCallback(() => {
+      const nextOpen = !isOpen;
+      if (propIsOpen === void 0) {
+        setInternalIsOpen(nextOpen);
+      }
+      onOpenChange?.(nextOpen);
+      if (!nextOpen) {
+        setActiveIndex(-1);
+      }
+    }, [isOpen, propIsOpen, onOpenChange]);
+    useEffect5(() => {
+      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]);
+    useEffect5(() => {
+      const handleEscape = (event) => {
+        if (event.key === "Escape") {
+          closeMenu();
+        }
+      };
+      if (isOpen) {
+        document.addEventListener("keydown", handleEscape);
+      }
+      return () => {
+        document.removeEventListener("keydown", handleEscape);
+      };
+    }, [isOpen, closeMenu]);
+    useEffect5(() => {
+      if (isOpen && menuRef.current) {
+        menuRef.current.focus();
+      }
+    }, [isOpen]);
+    useEffect5(() => {
+      if (!isOpen) {
+        itemsRef.current = [];
+      }
+    }, [isOpen]);
+    const registerItem = useCallback((id) => {
+      const index = itemsRef.current.indexOf(id);
+      if (index === -1) {
+        itemsRef.current.push(id);
+        return itemsRef.current.length - 1;
+      }
+      return index;
+    }, []);
+    const unregisterItem = useCallback((id) => {
+      const index = itemsRef.current.indexOf(id);
+      if (index !== -1) {
+        itemsRef.current.splice(index, 1);
+      }
+    }, []);
+    const onItemSelect = 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 = 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 = 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__ */ jsx116(
+            ContextMenuCheckboxItem,
+            {
+              ...commonProps,
+              checked: item.checked,
+              onCheckedChange: (checked) => onCheckedChange?.(item.id, checked),
+              onPress: item.onPress,
+              children: item.label
+            }
+          );
+        }
+        if (item.variant === "radio") {
+          return /* @__PURE__ */ jsx116(
+            ContextMenuRadioItem,
+            {
+              ...commonProps,
+              value: item.id,
+              onPress: item.onPress,
+              children: item.label
+            }
+          );
+        }
+        return /* @__PURE__ */ jsx116(
+          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__ */ jsxs6(React10.Fragment, { children: [
+        groupIndex > 0 && /* @__PURE__ */ jsx116(ContextMenuSeparator, {}),
+        /* @__PURE__ */ jsx116(
+          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__ */ jsx116(
+          Box,
+          {
+            padding: 16,
+            alignItems: "center",
+            justifyContent: "center",
+            minHeight: 60,
+            children: /* @__PURE__ */ jsx116(Spinner2, { 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__ */ jsx116(ContextMenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs6(
+      "div",
+      {
+        ref: containerRef,
+        style: {
+          position: position ? "static" : "relative",
+          width: trigger ? "fit-content" : void 0,
+          display: "inline-block"
+        },
+        "data-testid": testId,
+        children: [
+          trigger && /* @__PURE__ */ jsx116(
+            "div",
+            {
+              onClick: toggleMenu,
+              style: { cursor: "pointer" },
+              "data-testid": `${testId}-trigger`,
+              children: trigger
+            }
+          ),
+          isOpen && /* @__PURE__ */ jsx116(
+            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
+import { useState as useState2, useEffect as useEffect6 } from "react";
+var useContextMenuPosition = ({
+  position,
+  menuRef,
+  isOpen,
+  offset = 8
+}) => {
+  const [adjustedPosition, setAdjustedPosition] = useState2();
+  useEffect6(() => {
+    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
+import { useCallback as useCallback2, useRef as useRef6, useEffect as useEffect7 } from "react";
+var useKeyboardNavigation = ({
+  isOpen,
+  itemCount,
+  activeIndex,
+  setActiveIndex,
+  onSelect,
+  onClose,
+  loop = true
+}) => {
+  const typeaheadBuffer = useRef6("");
+  const typeaheadTimeout = useRef6(null);
+  useEffect7(() => {
+    if (!isOpen) {
+      typeaheadBuffer.current = "";
+      if (typeaheadTimeout.current) {
+        clearTimeout(typeaheadTimeout.current);
+      }
+    }
+  }, [isOpen]);
+  const handleKeyDown = useCallback2(
+    (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 };
+};
+export {
+  ContextMenu,
+  ContextMenuCheckboxItem,
+  ContextMenuGroup,
+  ContextMenuItem,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuSearch,
+  ContextMenuSeparator,
+  useContextMenu,
+  useContextMenuPosition,
+  useContextMenuRequired,
+  useKeyboardNavigation,
+  useRadioGroup
+};
+//# sourceMappingURL=index.mjs.map