@xsolla/xui-autocomplete 0.190.0 → 0.192.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import { ThemeOverrideProps } from '@xsolla/xui-core';
2
+ import { ThemeOverrideProps, ThemeMode, ProductContext } from '@xsolla/xui-core';
3
3
 
4
4
  interface AutocompleteOption {
5
5
  id: string;
@@ -31,6 +31,10 @@ interface AutocompleteProps extends ThemeOverrideProps {
31
31
  dropdownWidth?: number | string;
32
32
  /** Empty state message when no options match */
33
33
  emptyMessage?: string;
34
+ /** Theme mode for the dropdown overlay. Defaults to themeMode when not set. */
35
+ overlayThemeMode?: ThemeMode;
36
+ /** Product context for the dropdown overlay. Defaults to themeProductContext when not set. */
37
+ overlayThemeProductContext?: ProductContext;
34
38
  testID?: string;
35
39
  }
36
40
  declare const Autocomplete: React.FC<AutocompleteProps>;
package/native/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import { ThemeOverrideProps } from '@xsolla/xui-core';
2
+ import { ThemeOverrideProps, ThemeMode, ProductContext } from '@xsolla/xui-core';
3
3
 
4
4
  interface AutocompleteOption {
5
5
  id: string;
@@ -31,6 +31,10 @@ interface AutocompleteProps extends ThemeOverrideProps {
31
31
  dropdownWidth?: number | string;
32
32
  /** Empty state message when no options match */
33
33
  emptyMessage?: string;
34
+ /** Theme mode for the dropdown overlay. Defaults to themeMode when not set. */
35
+ overlayThemeMode?: ThemeMode;
36
+ /** Product context for the dropdown overlay. Defaults to themeProductContext when not set. */
37
+ overlayThemeProductContext?: ProductContext;
34
38
  testID?: string;
35
39
  }
36
40
  declare const Autocomplete: React.FC<AutocompleteProps>;
package/native/index.js CHANGED
@@ -579,9 +579,15 @@ var Autocomplete = ({
579
579
  emptyMessage = "No results found",
580
580
  testID,
581
581
  themeMode,
582
- themeProductContext
582
+ themeProductContext,
583
+ overlayThemeMode,
584
+ overlayThemeProductContext
583
585
  }) => {
584
586
  const { theme } = (0, import_xui_core.useResolvedTheme)({ themeMode, themeProductContext });
587
+ const { theme: overlayTheme } = (0, import_xui_core.useResolvedTheme)({
588
+ themeMode: overlayThemeMode ?? themeMode,
589
+ themeProductContext: overlayThemeProductContext ?? themeProductContext
590
+ });
585
591
  const [internalValue, setInternalValue] = (0, import_react3.useState)(propValue || "");
586
592
  const [isFocused, setIsFocused] = (0, import_react3.useState)(false);
587
593
  const [activeIndex, setActiveIndex] = (0, import_react3.useState)(-1);
@@ -717,7 +723,7 @@ var Autocomplete = ({
717
723
  const iconColor = isDisable ? inputColors.textDisable : placeholderColor;
718
724
  const getItemBackgroundColor = (index, disabled) => {
719
725
  if (activeIndex === index && !disabled) {
720
- return theme.colors.control.input.bgHover;
726
+ return overlayTheme.colors.control.input.bgHover;
721
727
  }
722
728
  return "transparent";
723
729
  };
@@ -812,10 +818,10 @@ var Autocomplete = ({
812
818
  top: sizeStyles.height + (label ? 28 : 0) + 4,
813
819
  left: 0,
814
820
  right: 0,
815
- backgroundColor: theme.colors.background.secondary,
816
- borderColor: theme.colors.border.secondary,
821
+ backgroundColor: overlayTheme.colors.background.secondary,
822
+ borderColor: overlayTheme.colors.border.secondary,
817
823
  borderWidth: 1,
818
- borderRadius: theme.shape.contextMenu[contextMenuSize].borderRadius,
824
+ borderRadius: overlayTheme.shape.contextMenu[contextMenuSize].borderRadius,
819
825
  paddingVertical: menuSizeStyles.paddingVertical,
820
826
  width: dropdownWidth,
821
827
  style: {
@@ -838,7 +844,7 @@ var Autocomplete = ({
838
844
  import_xui_spinner.Spinner,
839
845
  {
840
846
  size: "md",
841
- color: theme.colors.control.brand.primary.bg
847
+ color: overlayTheme.colors.control.brand.primary.bg
842
848
  }
843
849
  )
844
850
  }
@@ -855,8 +861,12 @@ var Autocomplete = ({
855
861
  paddingHorizontal: menuSizeStyles.itemPaddingHorizontal,
856
862
  paddingVertical: menuSizeStyles.itemPaddingVertical,
857
863
  backgroundColor: getItemBackgroundColor(index, option.disabled),
858
- hoverStyle: !option.disabled ? { backgroundColor: theme.colors.control.input.bgHover } : void 0,
859
- pressStyle: !option.disabled ? { backgroundColor: theme.colors.control.input.bgDisable } : void 0,
864
+ hoverStyle: !option.disabled ? {
865
+ backgroundColor: overlayTheme.colors.control.input.bgHover
866
+ } : void 0,
867
+ pressStyle: !option.disabled ? {
868
+ backgroundColor: overlayTheme.colors.control.input.bgDisable
869
+ } : void 0,
860
870
  onPress: () => !option.disabled && handleSelect(option),
861
871
  style: {
862
872
  cursor: option.disabled ? "not-allowed" : "pointer",
@@ -874,7 +884,7 @@ var Autocomplete = ({
874
884
  Icon,
875
885
  {
876
886
  size: menuSizeStyles.iconSize,
877
- color: option.disabled ? theme.colors.content.tertiary : theme.colors.content.secondary,
887
+ color: option.disabled ? overlayTheme.colors.content.tertiary : overlayTheme.colors.content.secondary,
878
888
  children: option.icon
879
889
  }
880
890
  )
@@ -884,7 +894,7 @@ var Autocomplete = ({
884
894
  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
885
895
  Text,
886
896
  {
887
- color: option.disabled ? theme.colors.control.input.textDisable : theme.colors.content.primary,
897
+ color: option.disabled ? overlayTheme.colors.control.input.textDisable : overlayTheme.colors.content.primary,
888
898
  fontSize: menuSizeStyles.fontSize,
889
899
  fontWeight: "400",
890
900
  lineHeight: menuSizeStyles.fontSize + 2,
@@ -894,7 +904,7 @@ var Autocomplete = ({
894
904
  option.description && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
895
905
  Text,
896
906
  {
897
- color: theme.colors.content.tertiary,
907
+ color: overlayTheme.colors.content.tertiary,
898
908
  fontSize: menuSizeStyles.descriptionFontSize,
899
909
  lineHeight: menuSizeStyles.descriptionFontSize + 2,
900
910
  children: option.description
@@ -907,7 +917,7 @@ var Autocomplete = ({
907
917
  )) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Box, { padding: 16, alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
908
918
  Text,
909
919
  {
910
- color: theme.colors.content.tertiary,
920
+ color: overlayTheme.colors.content.tertiary,
911
921
  fontSize: menuSizeStyles.fontSize,
912
922
  children: emptyMessage
913
923
  }
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/index.tsx","../../src/Autocomplete.tsx","../../../../foundation/primitives-native/src/Box.tsx","../../../../foundation/primitives-native/src/Text.tsx","../../../../foundation/primitives-native/src/Icon.tsx","../../../../foundation/primitives-native/src/Input.tsx"],"sourcesContent":["export * from \"./Autocomplete\";\n","import React, { useState, useRef, useEffect, useCallback } from \"react\";\nimport {\n Box,\n Text,\n Icon,\n InputPrimitive,\n // @ts-expect-error - this will be resolved at build time\n} from \"@xsolla/xui-primitives\";\nimport { useResolvedTheme, type ThemeOverrideProps } from \"@xsolla/xui-core\";\nimport { Spinner } from \"@xsolla/xui-spinner\";\n\nexport interface AutocompleteOption {\n id: string;\n label: string;\n description?: string;\n icon?: React.ReactNode;\n disabled?: boolean;\n}\n\nexport interface AutocompleteProps extends ThemeOverrideProps {\n value?: string;\n placeholder?: string;\n onValueChange?: (value: string) => void;\n onSelect?: (option: string | AutocompleteOption) => void;\n /** Simple string options for basic usage */\n options?: string[];\n /** Rich options with id, label, description, icon */\n list?: AutocompleteOption[];\n isLoading?: boolean;\n size?: \"xl\" | \"lg\" | \"md\" | \"sm\" | \"xs\";\n state?: \"default\" | \"hover\" | \"focus\" | \"disable\" | \"error\";\n label?: string;\n errorLabel?: string;\n iconLeft?: React.ReactNode;\n chevronRight?: boolean;\n filled?: boolean;\n /** Maximum height of the dropdown (default: 250) */\n maxHeight?: number;\n /** Width of the dropdown (default: matches input width) */\n dropdownWidth?: number | string;\n /** Empty state message when no options match */\n emptyMessage?: string;\n testID?: string;\n}\n\nconst SearchIcon = () => (\n <svg\n width=\"100%\"\n height=\"100%\"\n viewBox=\"0 0 18 18\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M8.25 14.25C11.5637 14.25 14.25 11.5637 14.25 8.25C14.25 4.93629 11.5637 2.25 8.25 2.25C4.93629 2.25 2.25 4.93629 2.25 8.25C2.25 11.5637 4.93629 14.25 8.25 14.25Z\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n <path\n d=\"M15.75 15.75L12.4875 12.4875\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n);\n\nconst ChevronDown = () => (\n <svg\n width=\"100%\"\n height=\"100%\"\n viewBox=\"0 0 18 18\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M4.5 6.75L9 11.25L13.5 6.75\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n);\n\nconst ChevronUp = () => (\n <svg\n width=\"100%\"\n height=\"100%\"\n viewBox=\"0 0 18 18\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M13.5 11.25L9 6.75L4.5 11.25\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n);\n\nconst CloseIcon = () => (\n <svg\n width=\"100%\"\n height=\"100%\"\n viewBox=\"0 0 18 18\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M13.5 4.5L4.5 13.5\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n <path\n d=\"M4.5 4.5L13.5 13.5\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n);\n\nconst mapToContextMenuSize = (\n size: AutocompleteProps[\"size\"]\n): \"sm\" | \"md\" | \"lg\" | \"xl\" => {\n switch (size) {\n case \"xs\":\n case \"sm\":\n return \"sm\";\n case \"md\":\n return \"md\";\n case \"lg\":\n return \"lg\";\n case \"xl\":\n return \"xl\";\n default:\n return \"md\";\n }\n};\n\nexport const Autocomplete: React.FC<AutocompleteProps> = ({\n value: propValue,\n placeholder = \"Search...\",\n onValueChange,\n onSelect,\n options = [],\n list,\n isLoading = false,\n size = \"md\",\n state: externalState,\n label,\n errorLabel,\n iconLeft = <SearchIcon />,\n chevronRight = true,\n filled = true,\n maxHeight = 250,\n dropdownWidth,\n emptyMessage = \"No results found\",\n testID,\n themeMode,\n themeProductContext,\n}) => {\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n const [internalValue, setInternalValue] = useState(propValue || \"\");\n const [isFocused, setIsFocused] = useState(false);\n const [activeIndex, setActiveIndex] = useState(-1);\n const containerRef = useRef<any>(null);\n const inputRef = useRef<any>(null);\n\n const value = propValue !== undefined ? propValue : internalValue;\n const state = externalState || (isFocused ? \"focus\" : \"default\");\n\n const isDisable = state === \"disable\";\n const isError = state === \"error\";\n const isFocus = state === \"focus\";\n\n const sizeStyles = theme.sizing.input(size);\n const inputColors = theme.colors.control.input;\n const contextMenuSize = mapToContextMenuSize(size);\n const menuSizeStyles = theme.sizing.contextMenu(contextMenuSize);\n\n // Determine which options to use (list takes priority over options)\n const normalizedOptions: AutocompleteOption[] =\n list ||\n options.map((opt, index) => ({\n id: String(index),\n label: opt,\n }));\n\n const hasOptions = normalizedOptions.length > 0;\n // Show dropdown when focused and either: has options, is loading, or has typed something (to show empty message)\n const showDropdown = isFocus && (hasOptions || isLoading || value.length > 0);\n\n // Reset active index when dropdown closes\n useEffect(() => {\n if (!showDropdown) {\n setActiveIndex(-1);\n }\n }, [showDropdown]);\n\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n if (\n containerRef.current &&\n !containerRef.current.contains(event.target)\n ) {\n setIsFocused(false);\n }\n };\n\n if (isFocused) {\n document.addEventListener(\"mousedown\", handleClickOutside);\n }\n return () => {\n document.removeEventListener(\"mousedown\", handleClickOutside);\n };\n }, [isFocused]);\n\n // Escape key handling\n useEffect(() => {\n const handleEscape = (event: KeyboardEvent) => {\n if (event.key === \"Escape\" && isFocused) {\n setIsFocused(false);\n }\n };\n\n if (isFocused) {\n document.addEventListener(\"keydown\", handleEscape);\n }\n return () => {\n document.removeEventListener(\"keydown\", handleEscape);\n };\n }, [isFocused]);\n\n const handleInputChange = (text: string) => {\n if (!isDisable) {\n setInternalValue(text);\n if (onValueChange) onValueChange(text);\n // Don't call setIsFocused here - onFocus handler already handles it\n // and calling it here causes extra re-renders that can interfere with typing\n setActiveIndex(-1);\n }\n };\n\n const handleSelect = useCallback(\n (option: AutocompleteOption) => {\n setInternalValue(option.label);\n setIsFocused(false);\n\n // Call onSelect with appropriate type\n if (onSelect) {\n // If using list prop, return the full option object\n // If using options prop (strings), return just the label string\n if (list) {\n onSelect(option);\n } else {\n onSelect(option.label);\n }\n }\n if (onValueChange) onValueChange(option.label);\n },\n [list, onSelect, onValueChange]\n );\n\n const handleClear = (e: any) => {\n e.stopPropagation();\n handleInputChange(\"\");\n };\n\n const findNextEnabledIndex = (\n currentIndex: number,\n direction: 1 | -1\n ): number => {\n const length = normalizedOptions.length;\n let nextIndex = currentIndex;\n for (let i = 0; i < length; i++) {\n nextIndex = (nextIndex + direction + length) % length;\n if (!normalizedOptions[nextIndex].disabled) {\n return nextIndex;\n }\n }\n return -1; // All options are disabled\n };\n\n // Keyboard navigation in input\n const handleInputKeyDown = (event: React.KeyboardEvent) => {\n if (!showDropdown || normalizedOptions.length === 0) return;\n\n switch (event.key) {\n case \"ArrowDown\":\n event.preventDefault();\n setActiveIndex((prev) => findNextEnabledIndex(prev, 1));\n break;\n case \"ArrowUp\":\n event.preventDefault();\n setActiveIndex((prev) => findNextEnabledIndex(prev, -1));\n break;\n case \"Enter\":\n event.preventDefault();\n if (activeIndex >= 0 && activeIndex < normalizedOptions.length) {\n const option = normalizedOptions[activeIndex];\n if (!option.disabled) {\n handleSelect(option);\n }\n }\n break;\n case \"Tab\":\n setIsFocused(false);\n break;\n }\n };\n\n let backgroundColor = inputColors.bg;\n let borderColor = inputColors.border;\n\n if (isDisable) {\n backgroundColor = inputColors.bgDisable;\n borderColor = inputColors.borderDisable;\n } else if (isError) {\n borderColor = theme.colors.border.alert;\n } else if (isFocus) {\n backgroundColor = theme.colors.control.focus.bg;\n borderColor = theme.colors.border.brand;\n } else if (state === \"hover\") {\n backgroundColor = inputColors.bgHover;\n borderColor = inputColors.borderHover;\n }\n\n // Handle filled override if provided\n if (filled === false && !isFocus && !isError && state !== \"hover\") {\n backgroundColor = \"transparent\";\n }\n\n const textColor = isDisable ? inputColors.textDisable : inputColors.text;\n const placeholderColor = inputColors.placeholder;\n const iconColor = isDisable ? inputColors.textDisable : placeholderColor;\n\n const getItemBackgroundColor = (index: number, disabled?: boolean) => {\n if (activeIndex === index && !disabled) {\n return theme.colors.control.input.bgHover;\n }\n return \"transparent\";\n };\n\n return (\n <Box\n testID={testID}\n ref={containerRef}\n flexDirection=\"column\"\n gap={4}\n width=\"100%\"\n position=\"relative\"\n >\n {label && (\n <Text\n color={theme.colors.content.secondary}\n fontSize={sizeStyles.fontSize - 2}\n fontWeight=\"500\"\n marginBottom={4}\n >\n {label}\n </Text>\n )}\n <Box\n backgroundColor={backgroundColor}\n borderColor={borderColor}\n borderWidth={borderColor !== \"transparent\" ? 1 : 0}\n borderRadius={sizeStyles.radius}\n height={sizeStyles.height}\n paddingHorizontal={sizeStyles.paddingHorizontal}\n flexDirection=\"row\"\n alignItems=\"center\"\n gap={10}\n position=\"relative\"\n hoverStyle={\n !isDisable && !isFocus && !isError\n ? {\n backgroundColor: inputColors.bgHover,\n borderColor: inputColors.borderHover,\n }\n : undefined\n }\n >\n {iconLeft && (\n <Box alignItems=\"center\" justifyContent=\"center\">\n <Icon size={sizeStyles.iconSize} color={iconColor}>\n {iconLeft}\n </Icon>\n </Box>\n )}\n\n <Box flex={1} height=\"100%\" justifyContent=\"center\">\n <InputPrimitive\n ref={inputRef}\n value={value}\n placeholder={placeholder}\n onChangeText={handleInputChange}\n onFocus={() => !isDisable && setIsFocused(true)}\n onKeyDown={handleInputKeyDown}\n disabled={isDisable}\n color={textColor}\n fontSize={sizeStyles.fontSize}\n placeholderTextColor={placeholderColor}\n role=\"combobox\"\n aria-expanded={showDropdown}\n aria-haspopup=\"listbox\"\n aria-controls=\"autocomplete-listbox\"\n aria-activedescendant={\n activeIndex >= 0\n ? `autocomplete-option-${normalizedOptions[activeIndex]?.id}`\n : undefined\n }\n />\n </Box>\n\n <Box flexDirection=\"row\" alignItems=\"center\" gap={4}>\n {value.length > 0 && !isDisable && (\n <Box onPress={handleClear} padding={2}>\n <Icon size={sizeStyles.iconSize - 2} color={iconColor}>\n <CloseIcon />\n </Icon>\n </Box>\n )}\n\n {chevronRight && (\n <Box\n alignItems=\"center\"\n justifyContent=\"center\"\n onPress={(e: any) => {\n e.stopPropagation();\n if (!isDisable) {\n const newFocusState = !isFocused;\n setIsFocused(newFocusState);\n // Focus input when opening dropdown\n if (newFocusState && inputRef.current) {\n inputRef.current.focus();\n }\n }\n }}\n style={{ cursor: isDisable ? \"not-allowed\" : \"pointer\" }}\n >\n <Icon size={sizeStyles.iconSize} color={iconColor}>\n {isFocus ? <ChevronUp /> : <ChevronDown />}\n </Icon>\n </Box>\n )}\n </Box>\n </Box>\n\n {/* Dropdown Menu */}\n {showDropdown && (\n <Box\n position=\"absolute\"\n top={sizeStyles.height + (label ? 28 : 0) + 4}\n left={0}\n right={0}\n backgroundColor={theme.colors.background.secondary}\n borderColor={theme.colors.border.secondary}\n borderWidth={1}\n borderRadius={theme.shape.contextMenu[contextMenuSize].borderRadius}\n paddingVertical={menuSizeStyles.paddingVertical}\n width={dropdownWidth}\n style={{\n zIndex: 1000,\n boxShadow: \"0 4px 12px rgba(0,0,0,0.15)\",\n maxHeight,\n overflowY: \"auto\",\n }}\n id=\"autocomplete-listbox\"\n role=\"listbox\"\n aria-label=\"Autocomplete suggestions\"\n >\n {isLoading ? (\n <Box\n padding={16}\n alignItems=\"center\"\n justifyContent=\"center\"\n minHeight={60}\n >\n <Spinner\n size=\"md\"\n color={theme.colors.control.brand.primary.bg}\n />\n </Box>\n ) : hasOptions ? (\n normalizedOptions.map((option, index) => (\n <Box\n key={option.id}\n id={`autocomplete-option-${option.id}`}\n role=\"option\"\n aria-selected={activeIndex === index}\n aria-disabled={option.disabled}\n flexDirection=\"row\"\n alignItems={option.description ? \"flex-start\" : \"center\"}\n gap={menuSizeStyles.gap}\n paddingHorizontal={menuSizeStyles.itemPaddingHorizontal}\n paddingVertical={menuSizeStyles.itemPaddingVertical}\n backgroundColor={getItemBackgroundColor(index, option.disabled)}\n hoverStyle={\n !option.disabled\n ? { backgroundColor: theme.colors.control.input.bgHover }\n : undefined\n }\n pressStyle={\n !option.disabled\n ? { backgroundColor: theme.colors.control.input.bgDisable }\n : undefined\n }\n onPress={() => !option.disabled && handleSelect(option)}\n style={{\n cursor: option.disabled ? \"not-allowed\" : \"pointer\",\n opacity: option.disabled ? 0.5 : 1,\n }}\n >\n {/* Leading Icon */}\n {option.icon && (\n <Box\n width={menuSizeStyles.iconSize}\n marginTop={option.description ? 2 : 0}\n alignItems=\"center\"\n justifyContent=\"center\"\n >\n <Icon\n size={menuSizeStyles.iconSize}\n color={\n option.disabled\n ? theme.colors.content.tertiary\n : theme.colors.content.secondary\n }\n >\n {option.icon}\n </Icon>\n </Box>\n )}\n\n {/* Content: Label and Description */}\n <Box flex={1} flexDirection=\"column\" gap={2}>\n <Text\n color={\n option.disabled\n ? theme.colors.control.input.textDisable\n : theme.colors.content.primary\n }\n fontSize={menuSizeStyles.fontSize}\n fontWeight=\"400\"\n lineHeight={menuSizeStyles.fontSize + 2}\n >\n {option.label}\n </Text>\n {option.description && (\n <Text\n color={theme.colors.content.tertiary}\n fontSize={menuSizeStyles.descriptionFontSize}\n lineHeight={menuSizeStyles.descriptionFontSize + 2}\n >\n {option.description}\n </Text>\n )}\n </Box>\n </Box>\n ))\n ) : (\n <Box padding={16} alignItems=\"center\">\n <Text\n color={theme.colors.content.tertiary}\n fontSize={menuSizeStyles.fontSize}\n >\n {emptyMessage}\n </Text>\n </Box>\n )}\n </Box>\n )}\n\n {isError && errorLabel && (\n <Text\n color={theme.colors.content.alert.primary}\n fontSize={sizeStyles.fontSize - 2}\n marginTop={4}\n >\n {errorLabel}\n </Text>\n )}\n </Box>\n );\n};\n","import React from \"react\";\nimport {\n View,\n Pressable,\n Image,\n ViewStyle,\n ImageStyle,\n DimensionValue,\n AnimatableNumericValue,\n} from \"react-native\";\nimport { BoxProps } from \"@xsolla/xui-primitives-core\";\n\nexport const Box: React.FC<BoxProps> = ({\n children,\n onPress,\n onLayout,\n onMoveShouldSetResponder,\n onResponderGrant,\n onResponderMove,\n onResponderRelease,\n onResponderTerminate,\n backgroundColor,\n borderColor,\n borderWidth,\n borderBottomWidth,\n borderBottomColor,\n borderTopWidth,\n borderTopColor,\n borderLeftWidth,\n borderLeftColor,\n borderRightWidth,\n borderRightColor,\n borderRadius,\n borderStyle,\n height,\n padding,\n paddingHorizontal,\n paddingVertical,\n margin,\n marginTop,\n marginBottom,\n marginLeft,\n marginRight,\n flexDirection,\n alignItems,\n justifyContent,\n position,\n top,\n bottom,\n left,\n right,\n width,\n minWidth,\n minHeight,\n maxWidth,\n maxHeight,\n flex,\n overflow,\n zIndex,\n hoverStyle,\n pressStyle,\n style,\n \"data-testid\": dataTestId,\n testID,\n as,\n src,\n alt,\n ...rest\n}) => {\n const getContainerStyle = (pressed?: boolean): ViewStyle => ({\n backgroundColor:\n pressed && pressStyle?.backgroundColor\n ? pressStyle.backgroundColor\n : backgroundColor,\n borderColor,\n borderWidth,\n borderBottomWidth,\n borderBottomColor,\n borderTopWidth,\n borderTopColor,\n borderLeftWidth,\n borderLeftColor,\n borderRightWidth,\n borderRightColor,\n borderRadius: borderRadius as AnimatableNumericValue,\n borderStyle: borderStyle as ViewStyle[\"borderStyle\"],\n overflow,\n zIndex,\n height: height as DimensionValue,\n width: width as DimensionValue,\n minWidth: minWidth as DimensionValue,\n minHeight: minHeight as DimensionValue,\n maxWidth: maxWidth as DimensionValue,\n maxHeight: maxHeight as DimensionValue,\n padding: padding as DimensionValue,\n paddingHorizontal: paddingHorizontal as DimensionValue,\n paddingVertical: paddingVertical as DimensionValue,\n margin: margin as DimensionValue,\n marginTop: marginTop as DimensionValue,\n marginBottom: marginBottom as DimensionValue,\n marginLeft: marginLeft as DimensionValue,\n marginRight: marginRight as DimensionValue,\n flexDirection,\n alignItems,\n justifyContent,\n position: position as ViewStyle[\"position\"],\n top: top as DimensionValue,\n bottom: bottom as DimensionValue,\n left: left as DimensionValue,\n right: right as DimensionValue,\n flex,\n ...(style as ViewStyle),\n });\n\n const finalTestID = dataTestId || testID;\n\n // Destructure and drop web-only props from rest before passing to RN components\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const {\n role,\n tabIndex,\n onKeyDown,\n onKeyUp,\n \"aria-label\": _ariaLabel,\n \"aria-labelledby\": _ariaLabelledBy,\n \"aria-current\": _ariaCurrent,\n \"aria-disabled\": _ariaDisabled,\n \"aria-live\": _ariaLive,\n className,\n \"data-testid\": _dataTestId,\n ...nativeRest\n } = rest as Record<string, unknown>;\n\n // Handle as=\"img\" for React Native\n if (as === \"img\" && src) {\n const imageStyle: ImageStyle = {\n width: width as DimensionValue,\n height: height as DimensionValue,\n borderRadius: borderRadius as number,\n position: position as ImageStyle[\"position\"],\n top: top as DimensionValue,\n bottom: bottom as DimensionValue,\n left: left as DimensionValue,\n right: right as DimensionValue,\n ...(style as ImageStyle),\n };\n\n return (\n <Image\n source={{ uri: src }}\n style={imageStyle}\n testID={finalTestID}\n resizeMode=\"cover\"\n {...nativeRest}\n />\n );\n }\n\n if (onPress) {\n return (\n <Pressable\n onPress={onPress}\n onLayout={onLayout}\n onMoveShouldSetResponder={onMoveShouldSetResponder}\n onResponderGrant={onResponderGrant}\n onResponderMove={onResponderMove}\n onResponderRelease={onResponderRelease}\n onResponderTerminate={onResponderTerminate}\n style={({ pressed }) => getContainerStyle(pressed)}\n testID={finalTestID}\n {...nativeRest}\n >\n {children}\n </Pressable>\n );\n }\n\n return (\n <View\n style={getContainerStyle()}\n testID={finalTestID}\n onLayout={onLayout}\n onMoveShouldSetResponder={onMoveShouldSetResponder}\n onResponderGrant={onResponderGrant}\n onResponderMove={onResponderMove}\n onResponderRelease={onResponderRelease}\n onResponderTerminate={onResponderTerminate}\n {...nativeRest}\n >\n {children}\n </View>\n );\n};\n","import React from \"react\";\nimport {\n Text as RNText,\n TextStyle,\n AccessibilityRole,\n StyleSheet,\n} from \"react-native\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\nconst roleMap: Record<string, AccessibilityRole> = {\n alert: \"alert\",\n heading: \"header\",\n button: \"button\",\n link: \"link\",\n text: \"text\",\n};\n\nconst parseNumericValue = (\n value: string | number | undefined\n): number | undefined => {\n if (value === undefined) return undefined;\n if (typeof value === \"number\") return value;\n const parsed = parseFloat(value);\n return isNaN(parsed) ? undefined : parsed;\n};\n\nexport const Text: React.FC<TextProps> = ({\n children,\n color,\n fontSize,\n fontWeight,\n fontFamily,\n textAlign,\n lineHeight,\n numberOfLines,\n id,\n role,\n testID,\n \"data-testid\": dataTestId,\n style: styleProp,\n ...props\n}) => {\n let resolvedFontFamily = fontFamily\n ? fontFamily.split(\",\")[0].replace(/['\"]/g, \"\").trim()\n : undefined;\n\n if (\n resolvedFontFamily === \"Pilat Wide\" ||\n resolvedFontFamily === \"Pilat Wide Bold\" ||\n resolvedFontFamily === \"Aktiv Grotesk\"\n ) {\n resolvedFontFamily = undefined;\n }\n\n const incomingStyle = StyleSheet.flatten(styleProp) as TextStyle | undefined;\n\n const baseStyle: TextStyle = {\n color: color ?? incomingStyle?.color,\n fontSize: typeof fontSize === \"number\" ? fontSize : undefined,\n fontWeight: fontWeight as TextStyle[\"fontWeight\"],\n fontFamily: resolvedFontFamily,\n textDecorationLine: props.textDecoration as TextStyle[\"textDecorationLine\"],\n textAlign: textAlign ?? incomingStyle?.textAlign,\n lineHeight: parseNumericValue(lineHeight ?? incomingStyle?.lineHeight),\n marginTop: parseNumericValue(\n incomingStyle?.marginTop as number | string | undefined\n ),\n marginBottom: parseNumericValue(\n incomingStyle?.marginBottom as number | string | undefined\n ),\n };\n\n const accessibilityRole = role ? roleMap[role] : undefined;\n\n return (\n <RNText\n style={baseStyle}\n numberOfLines={numberOfLines}\n testID={dataTestId || testID || id}\n accessibilityRole={accessibilityRole}\n >\n {children}\n </RNText>\n );\n};\n","import React from \"react\";\nimport { View, ViewStyle } from \"react-native\";\nimport { IconProps } from \"@xsolla/xui-primitives-core\";\n\nexport const Icon: React.FC<IconProps> = ({\n children,\n color,\n size,\n testID,\n \"data-testid\": dataTestId,\n}) => {\n const style: ViewStyle = {\n width: typeof size === \"number\" ? size : undefined,\n height: typeof size === \"number\" ? size : undefined,\n alignItems: \"center\",\n justifyContent: \"center\",\n };\n\n // On native, we try to pass the color down to children (like Text primitives)\n // to mimic the CSS inheritance behavior of the web version.\n const childrenWithProps = React.Children.map(children, (child) => {\n if (React.isValidElement(child)) {\n return React.cloneElement(child, {\n color: child.props.color || color,\n // Also pass size if child seems to be an icon that needs it\n size: child.props.size || size,\n });\n }\n return child;\n });\n\n return (\n <View style={style} testID={dataTestId || testID}>\n {childrenWithProps}\n </View>\n );\n};\n","import React, { forwardRef } from \"react\";\nimport { TextInput as RNTextInput } from \"react-native\";\nimport { InputPrimitiveProps } from \"@xsolla/xui-primitives-core\";\n\n// Map web input types to React Native keyboard types\nconst keyboardTypeMap: Record<string, any> = {\n text: \"default\",\n number: \"numeric\",\n email: \"email-address\",\n tel: \"phone-pad\",\n url: \"url\",\n decimal: \"decimal-pad\",\n};\n\n// Map web inputMode to React Native keyboard types\nconst inputModeToKeyboardType: Record<string, any> = {\n none: \"default\",\n text: \"default\",\n decimal: \"decimal-pad\",\n numeric: \"number-pad\",\n tel: \"phone-pad\",\n search: \"default\",\n email: \"email-address\",\n url: \"url\",\n};\n\n// Map web autoComplete to React Native textContentType (iOS)\nconst autoCompleteToTextContentType: Record<string, any> = {\n \"one-time-code\": \"oneTimeCode\",\n email: \"emailAddress\",\n username: \"username\",\n password: \"password\",\n \"new-password\": \"newPassword\",\n tel: \"telephoneNumber\",\n \"postal-code\": \"postalCode\",\n name: \"name\",\n};\n\nexport const InputPrimitive = forwardRef<RNTextInput, InputPrimitiveProps>(\n (\n {\n value,\n placeholder,\n onChange,\n onChangeText,\n onFocus,\n onBlur,\n onKeyDown,\n disabled,\n secureTextEntry,\n style,\n color,\n fontSize,\n fontFamily,\n placeholderTextColor,\n maxLength,\n type,\n inputMode,\n autoComplete,\n id,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-label\": ariaLabel,\n \"aria-disabled\": ariaDisabled,\n \"data-testid\": dataTestId,\n testID,\n },\n ref\n ) => {\n const handleChangeText = (text: string) => {\n onChangeText?.(text);\n\n // Create a synthetic event for onChange compatibility\n // Include nativeEvent and no-op methods to prevent runtime errors\n // when consumers expect DOM-like event behavior\n if (onChange) {\n const syntheticEvent = {\n target: { value: text },\n currentTarget: { value: text },\n type: \"change\",\n nativeEvent: { text },\n preventDefault: () => {},\n stopPropagation: () => {},\n isTrusted: false,\n } as unknown as React.ChangeEvent<HTMLInputElement>;\n onChange(syntheticEvent);\n }\n };\n\n // Determine keyboard type - inputMode takes precedence over type\n const keyboardType = inputMode\n ? inputModeToKeyboardType[inputMode] || \"default\"\n : type\n ? keyboardTypeMap[type] || \"default\"\n : \"default\";\n\n // Determine textContentType for iOS autofill\n const textContentType = autoComplete\n ? autoCompleteToTextContentType[autoComplete]\n : undefined;\n\n let resolvedFontFamily = fontFamily\n ? fontFamily.split(\",\")[0].replace(/['\"]/g, \"\").trim()\n : undefined;\n\n if (\n resolvedFontFamily === \"Pilat Wide\" ||\n resolvedFontFamily === \"Pilat Wide Bold\" ||\n resolvedFontFamily === \"Aktiv Grotesk\"\n ) {\n resolvedFontFamily = undefined;\n }\n\n return (\n <RNTextInput\n ref={ref}\n value={value}\n placeholder={placeholder}\n onChangeText={handleChangeText}\n onFocus={onFocus}\n onBlur={onBlur}\n onKeyPress={(e) => {\n // Map onKeyPress to onKeyDown for cross-platform compatibility\n // Include preventDefault to avoid runtime errors when consumers call it\n if (onKeyDown) {\n onKeyDown({\n key: e.nativeEvent.key,\n preventDefault: () => {},\n } as any);\n }\n }}\n editable={!disabled}\n secureTextEntry={secureTextEntry || type === \"password\"}\n keyboardType={keyboardType}\n textContentType={textContentType}\n style={[\n {\n color,\n fontSize: typeof fontSize === \"number\" ? fontSize : undefined,\n fontFamily: resolvedFontFamily,\n flex: 1,\n padding: 0,\n textAlign: (style as any)?.textAlign || \"left\",\n },\n style as any,\n ]}\n placeholderTextColor={placeholderTextColor}\n maxLength={maxLength}\n // React Native accessibility props\n testID={dataTestId || testID || id}\n accessibilityLabel={ariaLabel}\n accessibilityHint={ariaDescribedBy}\n accessibilityState={{\n disabled: disabled || ariaDisabled,\n }}\n accessible={true}\n />\n );\n }\n);\n\nInputPrimitive.displayName = \"InputPrimitive\";\n"],"mappings":"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","names":["import_react","import_react_native","import_jsx_runtime","RNText","import_react_native","import_jsx_runtime","React","import_react","import_react_native","import_jsx_runtime","RNTextInput","import_jsx_runtime"]}
1
+ {"version":3,"sources":["../../src/index.tsx","../../src/Autocomplete.tsx","../../../../foundation/primitives-native/src/Box.tsx","../../../../foundation/primitives-native/src/Text.tsx","../../../../foundation/primitives-native/src/Icon.tsx","../../../../foundation/primitives-native/src/Input.tsx"],"sourcesContent":["export * from \"./Autocomplete\";\n","import React, { useState, useRef, useEffect, useCallback } from \"react\";\nimport {\n Box,\n Text,\n Icon,\n InputPrimitive,\n // @ts-expect-error - this will be resolved at build time\n} from \"@xsolla/xui-primitives\";\nimport {\n useResolvedTheme,\n type ThemeOverrideProps,\n type ThemeMode,\n type ProductContext,\n} from \"@xsolla/xui-core\";\nimport { Spinner } from \"@xsolla/xui-spinner\";\n\nexport interface AutocompleteOption {\n id: string;\n label: string;\n description?: string;\n icon?: React.ReactNode;\n disabled?: boolean;\n}\n\nexport interface AutocompleteProps extends ThemeOverrideProps {\n value?: string;\n placeholder?: string;\n onValueChange?: (value: string) => void;\n onSelect?: (option: string | AutocompleteOption) => void;\n /** Simple string options for basic usage */\n options?: string[];\n /** Rich options with id, label, description, icon */\n list?: AutocompleteOption[];\n isLoading?: boolean;\n size?: \"xl\" | \"lg\" | \"md\" | \"sm\" | \"xs\";\n state?: \"default\" | \"hover\" | \"focus\" | \"disable\" | \"error\";\n label?: string;\n errorLabel?: string;\n iconLeft?: React.ReactNode;\n chevronRight?: boolean;\n filled?: boolean;\n /** Maximum height of the dropdown (default: 250) */\n maxHeight?: number;\n /** Width of the dropdown (default: matches input width) */\n dropdownWidth?: number | string;\n /** Empty state message when no options match */\n emptyMessage?: string;\n /** Theme mode for the dropdown overlay. Defaults to themeMode when not set. */\n overlayThemeMode?: ThemeMode;\n /** Product context for the dropdown overlay. Defaults to themeProductContext when not set. */\n overlayThemeProductContext?: ProductContext;\n testID?: string;\n}\n\nconst SearchIcon = () => (\n <svg\n width=\"100%\"\n height=\"100%\"\n viewBox=\"0 0 18 18\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M8.25 14.25C11.5637 14.25 14.25 11.5637 14.25 8.25C14.25 4.93629 11.5637 2.25 8.25 2.25C4.93629 2.25 2.25 4.93629 2.25 8.25C2.25 11.5637 4.93629 14.25 8.25 14.25Z\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n <path\n d=\"M15.75 15.75L12.4875 12.4875\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n);\n\nconst ChevronDown = () => (\n <svg\n width=\"100%\"\n height=\"100%\"\n viewBox=\"0 0 18 18\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M4.5 6.75L9 11.25L13.5 6.75\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n);\n\nconst ChevronUp = () => (\n <svg\n width=\"100%\"\n height=\"100%\"\n viewBox=\"0 0 18 18\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M13.5 11.25L9 6.75L4.5 11.25\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n);\n\nconst CloseIcon = () => (\n <svg\n width=\"100%\"\n height=\"100%\"\n viewBox=\"0 0 18 18\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M13.5 4.5L4.5 13.5\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n <path\n d=\"M4.5 4.5L13.5 13.5\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n);\n\nconst mapToContextMenuSize = (\n size: AutocompleteProps[\"size\"]\n): \"sm\" | \"md\" | \"lg\" | \"xl\" => {\n switch (size) {\n case \"xs\":\n case \"sm\":\n return \"sm\";\n case \"md\":\n return \"md\";\n case \"lg\":\n return \"lg\";\n case \"xl\":\n return \"xl\";\n default:\n return \"md\";\n }\n};\n\nexport const Autocomplete: React.FC<AutocompleteProps> = ({\n value: propValue,\n placeholder = \"Search...\",\n onValueChange,\n onSelect,\n options = [],\n list,\n isLoading = false,\n size = \"md\",\n state: externalState,\n label,\n errorLabel,\n iconLeft = <SearchIcon />,\n chevronRight = true,\n filled = true,\n maxHeight = 250,\n dropdownWidth,\n emptyMessage = \"No results found\",\n testID,\n themeMode,\n themeProductContext,\n overlayThemeMode,\n overlayThemeProductContext,\n}) => {\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n const { theme: overlayTheme } = useResolvedTheme({\n themeMode: overlayThemeMode ?? themeMode,\n themeProductContext: overlayThemeProductContext ?? themeProductContext,\n });\n const [internalValue, setInternalValue] = useState(propValue || \"\");\n const [isFocused, setIsFocused] = useState(false);\n const [activeIndex, setActiveIndex] = useState(-1);\n const containerRef = useRef<any>(null);\n const inputRef = useRef<any>(null);\n\n const value = propValue !== undefined ? propValue : internalValue;\n const state = externalState || (isFocused ? \"focus\" : \"default\");\n\n const isDisable = state === \"disable\";\n const isError = state === \"error\";\n const isFocus = state === \"focus\";\n\n const sizeStyles = theme.sizing.input(size);\n const inputColors = theme.colors.control.input;\n const contextMenuSize = mapToContextMenuSize(size);\n const menuSizeStyles = theme.sizing.contextMenu(contextMenuSize);\n\n // Determine which options to use (list takes priority over options)\n const normalizedOptions: AutocompleteOption[] =\n list ||\n options.map((opt, index) => ({\n id: String(index),\n label: opt,\n }));\n\n const hasOptions = normalizedOptions.length > 0;\n // Show dropdown when focused and either: has options, is loading, or has typed something (to show empty message)\n const showDropdown = isFocus && (hasOptions || isLoading || value.length > 0);\n\n // Reset active index when dropdown closes\n useEffect(() => {\n if (!showDropdown) {\n setActiveIndex(-1);\n }\n }, [showDropdown]);\n\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n if (\n containerRef.current &&\n !containerRef.current.contains(event.target)\n ) {\n setIsFocused(false);\n }\n };\n\n if (isFocused) {\n document.addEventListener(\"mousedown\", handleClickOutside);\n }\n return () => {\n document.removeEventListener(\"mousedown\", handleClickOutside);\n };\n }, [isFocused]);\n\n // Escape key handling\n useEffect(() => {\n const handleEscape = (event: KeyboardEvent) => {\n if (event.key === \"Escape\" && isFocused) {\n setIsFocused(false);\n }\n };\n\n if (isFocused) {\n document.addEventListener(\"keydown\", handleEscape);\n }\n return () => {\n document.removeEventListener(\"keydown\", handleEscape);\n };\n }, [isFocused]);\n\n const handleInputChange = (text: string) => {\n if (!isDisable) {\n setInternalValue(text);\n if (onValueChange) onValueChange(text);\n // Don't call setIsFocused here - onFocus handler already handles it\n // and calling it here causes extra re-renders that can interfere with typing\n setActiveIndex(-1);\n }\n };\n\n const handleSelect = useCallback(\n (option: AutocompleteOption) => {\n setInternalValue(option.label);\n setIsFocused(false);\n\n // Call onSelect with appropriate type\n if (onSelect) {\n // If using list prop, return the full option object\n // If using options prop (strings), return just the label string\n if (list) {\n onSelect(option);\n } else {\n onSelect(option.label);\n }\n }\n if (onValueChange) onValueChange(option.label);\n },\n [list, onSelect, onValueChange]\n );\n\n const handleClear = (e: any) => {\n e.stopPropagation();\n handleInputChange(\"\");\n };\n\n const findNextEnabledIndex = (\n currentIndex: number,\n direction: 1 | -1\n ): number => {\n const length = normalizedOptions.length;\n let nextIndex = currentIndex;\n for (let i = 0; i < length; i++) {\n nextIndex = (nextIndex + direction + length) % length;\n if (!normalizedOptions[nextIndex].disabled) {\n return nextIndex;\n }\n }\n return -1; // All options are disabled\n };\n\n // Keyboard navigation in input\n const handleInputKeyDown = (event: React.KeyboardEvent) => {\n if (!showDropdown || normalizedOptions.length === 0) return;\n\n switch (event.key) {\n case \"ArrowDown\":\n event.preventDefault();\n setActiveIndex((prev) => findNextEnabledIndex(prev, 1));\n break;\n case \"ArrowUp\":\n event.preventDefault();\n setActiveIndex((prev) => findNextEnabledIndex(prev, -1));\n break;\n case \"Enter\":\n event.preventDefault();\n if (activeIndex >= 0 && activeIndex < normalizedOptions.length) {\n const option = normalizedOptions[activeIndex];\n if (!option.disabled) {\n handleSelect(option);\n }\n }\n break;\n case \"Tab\":\n setIsFocused(false);\n break;\n }\n };\n\n let backgroundColor = inputColors.bg;\n let borderColor = inputColors.border;\n\n if (isDisable) {\n backgroundColor = inputColors.bgDisable;\n borderColor = inputColors.borderDisable;\n } else if (isError) {\n borderColor = theme.colors.border.alert;\n } else if (isFocus) {\n backgroundColor = theme.colors.control.focus.bg;\n borderColor = theme.colors.border.brand;\n } else if (state === \"hover\") {\n backgroundColor = inputColors.bgHover;\n borderColor = inputColors.borderHover;\n }\n\n // Handle filled override if provided\n if (filled === false && !isFocus && !isError && state !== \"hover\") {\n backgroundColor = \"transparent\";\n }\n\n const textColor = isDisable ? inputColors.textDisable : inputColors.text;\n const placeholderColor = inputColors.placeholder;\n const iconColor = isDisable ? inputColors.textDisable : placeholderColor;\n\n const getItemBackgroundColor = (index: number, disabled?: boolean) => {\n if (activeIndex === index && !disabled) {\n return overlayTheme.colors.control.input.bgHover;\n }\n return \"transparent\";\n };\n\n return (\n <Box\n testID={testID}\n ref={containerRef}\n flexDirection=\"column\"\n gap={4}\n width=\"100%\"\n position=\"relative\"\n >\n {label && (\n <Text\n color={theme.colors.content.secondary}\n fontSize={sizeStyles.fontSize - 2}\n fontWeight=\"500\"\n marginBottom={4}\n >\n {label}\n </Text>\n )}\n <Box\n backgroundColor={backgroundColor}\n borderColor={borderColor}\n borderWidth={borderColor !== \"transparent\" ? 1 : 0}\n borderRadius={sizeStyles.radius}\n height={sizeStyles.height}\n paddingHorizontal={sizeStyles.paddingHorizontal}\n flexDirection=\"row\"\n alignItems=\"center\"\n gap={10}\n position=\"relative\"\n hoverStyle={\n !isDisable && !isFocus && !isError\n ? {\n backgroundColor: inputColors.bgHover,\n borderColor: inputColors.borderHover,\n }\n : undefined\n }\n >\n {iconLeft && (\n <Box alignItems=\"center\" justifyContent=\"center\">\n <Icon size={sizeStyles.iconSize} color={iconColor}>\n {iconLeft}\n </Icon>\n </Box>\n )}\n\n <Box flex={1} height=\"100%\" justifyContent=\"center\">\n <InputPrimitive\n ref={inputRef}\n value={value}\n placeholder={placeholder}\n onChangeText={handleInputChange}\n onFocus={() => !isDisable && setIsFocused(true)}\n onKeyDown={handleInputKeyDown}\n disabled={isDisable}\n color={textColor}\n fontSize={sizeStyles.fontSize}\n placeholderTextColor={placeholderColor}\n role=\"combobox\"\n aria-expanded={showDropdown}\n aria-haspopup=\"listbox\"\n aria-controls=\"autocomplete-listbox\"\n aria-activedescendant={\n activeIndex >= 0\n ? `autocomplete-option-${normalizedOptions[activeIndex]?.id}`\n : undefined\n }\n />\n </Box>\n\n <Box flexDirection=\"row\" alignItems=\"center\" gap={4}>\n {value.length > 0 && !isDisable && (\n <Box onPress={handleClear} padding={2}>\n <Icon size={sizeStyles.iconSize - 2} color={iconColor}>\n <CloseIcon />\n </Icon>\n </Box>\n )}\n\n {chevronRight && (\n <Box\n alignItems=\"center\"\n justifyContent=\"center\"\n onPress={(e: any) => {\n e.stopPropagation();\n if (!isDisable) {\n const newFocusState = !isFocused;\n setIsFocused(newFocusState);\n // Focus input when opening dropdown\n if (newFocusState && inputRef.current) {\n inputRef.current.focus();\n }\n }\n }}\n style={{ cursor: isDisable ? \"not-allowed\" : \"pointer\" }}\n >\n <Icon size={sizeStyles.iconSize} color={iconColor}>\n {isFocus ? <ChevronUp /> : <ChevronDown />}\n </Icon>\n </Box>\n )}\n </Box>\n </Box>\n\n {/* Dropdown Menu */}\n {showDropdown && (\n <Box\n position=\"absolute\"\n top={sizeStyles.height + (label ? 28 : 0) + 4}\n left={0}\n right={0}\n backgroundColor={overlayTheme.colors.background.secondary}\n borderColor={overlayTheme.colors.border.secondary}\n borderWidth={1}\n borderRadius={\n overlayTheme.shape.contextMenu[contextMenuSize].borderRadius\n }\n paddingVertical={menuSizeStyles.paddingVertical}\n width={dropdownWidth}\n style={{\n zIndex: 1000,\n boxShadow: \"0 4px 12px rgba(0,0,0,0.15)\",\n maxHeight,\n overflowY: \"auto\",\n }}\n id=\"autocomplete-listbox\"\n role=\"listbox\"\n aria-label=\"Autocomplete suggestions\"\n >\n {isLoading ? (\n <Box\n padding={16}\n alignItems=\"center\"\n justifyContent=\"center\"\n minHeight={60}\n >\n <Spinner\n size=\"md\"\n color={overlayTheme.colors.control.brand.primary.bg}\n />\n </Box>\n ) : hasOptions ? (\n normalizedOptions.map((option, index) => (\n <Box\n key={option.id}\n id={`autocomplete-option-${option.id}`}\n role=\"option\"\n aria-selected={activeIndex === index}\n aria-disabled={option.disabled}\n flexDirection=\"row\"\n alignItems={option.description ? \"flex-start\" : \"center\"}\n gap={menuSizeStyles.gap}\n paddingHorizontal={menuSizeStyles.itemPaddingHorizontal}\n paddingVertical={menuSizeStyles.itemPaddingVertical}\n backgroundColor={getItemBackgroundColor(index, option.disabled)}\n hoverStyle={\n !option.disabled\n ? {\n backgroundColor:\n overlayTheme.colors.control.input.bgHover,\n }\n : undefined\n }\n pressStyle={\n !option.disabled\n ? {\n backgroundColor:\n overlayTheme.colors.control.input.bgDisable,\n }\n : undefined\n }\n onPress={() => !option.disabled && handleSelect(option)}\n style={{\n cursor: option.disabled ? \"not-allowed\" : \"pointer\",\n opacity: option.disabled ? 0.5 : 1,\n }}\n >\n {/* Leading Icon */}\n {option.icon && (\n <Box\n width={menuSizeStyles.iconSize}\n marginTop={option.description ? 2 : 0}\n alignItems=\"center\"\n justifyContent=\"center\"\n >\n <Icon\n size={menuSizeStyles.iconSize}\n color={\n option.disabled\n ? overlayTheme.colors.content.tertiary\n : overlayTheme.colors.content.secondary\n }\n >\n {option.icon}\n </Icon>\n </Box>\n )}\n\n {/* Content: Label and Description */}\n <Box flex={1} flexDirection=\"column\" gap={2}>\n <Text\n color={\n option.disabled\n ? overlayTheme.colors.control.input.textDisable\n : overlayTheme.colors.content.primary\n }\n fontSize={menuSizeStyles.fontSize}\n fontWeight=\"400\"\n lineHeight={menuSizeStyles.fontSize + 2}\n >\n {option.label}\n </Text>\n {option.description && (\n <Text\n color={overlayTheme.colors.content.tertiary}\n fontSize={menuSizeStyles.descriptionFontSize}\n lineHeight={menuSizeStyles.descriptionFontSize + 2}\n >\n {option.description}\n </Text>\n )}\n </Box>\n </Box>\n ))\n ) : (\n <Box padding={16} alignItems=\"center\">\n <Text\n color={overlayTheme.colors.content.tertiary}\n fontSize={menuSizeStyles.fontSize}\n >\n {emptyMessage}\n </Text>\n </Box>\n )}\n </Box>\n )}\n\n {isError && errorLabel && (\n <Text\n color={theme.colors.content.alert.primary}\n fontSize={sizeStyles.fontSize - 2}\n marginTop={4}\n >\n {errorLabel}\n </Text>\n )}\n </Box>\n );\n};\n","import React from \"react\";\nimport {\n View,\n Pressable,\n Image,\n ViewStyle,\n ImageStyle,\n DimensionValue,\n AnimatableNumericValue,\n} from \"react-native\";\nimport { BoxProps } from \"@xsolla/xui-primitives-core\";\n\nexport const Box: React.FC<BoxProps> = ({\n children,\n onPress,\n onLayout,\n onMoveShouldSetResponder,\n onResponderGrant,\n onResponderMove,\n onResponderRelease,\n onResponderTerminate,\n backgroundColor,\n borderColor,\n borderWidth,\n borderBottomWidth,\n borderBottomColor,\n borderTopWidth,\n borderTopColor,\n borderLeftWidth,\n borderLeftColor,\n borderRightWidth,\n borderRightColor,\n borderRadius,\n borderStyle,\n height,\n padding,\n paddingHorizontal,\n paddingVertical,\n margin,\n marginTop,\n marginBottom,\n marginLeft,\n marginRight,\n flexDirection,\n alignItems,\n justifyContent,\n position,\n top,\n bottom,\n left,\n right,\n width,\n minWidth,\n minHeight,\n maxWidth,\n maxHeight,\n flex,\n overflow,\n zIndex,\n hoverStyle,\n pressStyle,\n style,\n \"data-testid\": dataTestId,\n testID,\n as,\n src,\n alt,\n ...rest\n}) => {\n const getContainerStyle = (pressed?: boolean): ViewStyle => ({\n backgroundColor:\n pressed && pressStyle?.backgroundColor\n ? pressStyle.backgroundColor\n : backgroundColor,\n borderColor,\n borderWidth,\n borderBottomWidth,\n borderBottomColor,\n borderTopWidth,\n borderTopColor,\n borderLeftWidth,\n borderLeftColor,\n borderRightWidth,\n borderRightColor,\n borderRadius: borderRadius as AnimatableNumericValue,\n borderStyle: borderStyle as ViewStyle[\"borderStyle\"],\n overflow,\n zIndex,\n height: height as DimensionValue,\n width: width as DimensionValue,\n minWidth: minWidth as DimensionValue,\n minHeight: minHeight as DimensionValue,\n maxWidth: maxWidth as DimensionValue,\n maxHeight: maxHeight as DimensionValue,\n padding: padding as DimensionValue,\n paddingHorizontal: paddingHorizontal as DimensionValue,\n paddingVertical: paddingVertical as DimensionValue,\n margin: margin as DimensionValue,\n marginTop: marginTop as DimensionValue,\n marginBottom: marginBottom as DimensionValue,\n marginLeft: marginLeft as DimensionValue,\n marginRight: marginRight as DimensionValue,\n flexDirection,\n alignItems,\n justifyContent,\n position: position as ViewStyle[\"position\"],\n top: top as DimensionValue,\n bottom: bottom as DimensionValue,\n left: left as DimensionValue,\n right: right as DimensionValue,\n flex,\n ...(style as ViewStyle),\n });\n\n const finalTestID = dataTestId || testID;\n\n // Destructure and drop web-only props from rest before passing to RN components\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const {\n role,\n tabIndex,\n onKeyDown,\n onKeyUp,\n \"aria-label\": _ariaLabel,\n \"aria-labelledby\": _ariaLabelledBy,\n \"aria-current\": _ariaCurrent,\n \"aria-disabled\": _ariaDisabled,\n \"aria-live\": _ariaLive,\n className,\n \"data-testid\": _dataTestId,\n ...nativeRest\n } = rest as Record<string, unknown>;\n\n // Handle as=\"img\" for React Native\n if (as === \"img\" && src) {\n const imageStyle: ImageStyle = {\n width: width as DimensionValue,\n height: height as DimensionValue,\n borderRadius: borderRadius as number,\n position: position as ImageStyle[\"position\"],\n top: top as DimensionValue,\n bottom: bottom as DimensionValue,\n left: left as DimensionValue,\n right: right as DimensionValue,\n ...(style as ImageStyle),\n };\n\n return (\n <Image\n source={{ uri: src }}\n style={imageStyle}\n testID={finalTestID}\n resizeMode=\"cover\"\n {...nativeRest}\n />\n );\n }\n\n if (onPress) {\n return (\n <Pressable\n onPress={onPress}\n onLayout={onLayout}\n onMoveShouldSetResponder={onMoveShouldSetResponder}\n onResponderGrant={onResponderGrant}\n onResponderMove={onResponderMove}\n onResponderRelease={onResponderRelease}\n onResponderTerminate={onResponderTerminate}\n style={({ pressed }) => getContainerStyle(pressed)}\n testID={finalTestID}\n {...nativeRest}\n >\n {children}\n </Pressable>\n );\n }\n\n return (\n <View\n style={getContainerStyle()}\n testID={finalTestID}\n onLayout={onLayout}\n onMoveShouldSetResponder={onMoveShouldSetResponder}\n onResponderGrant={onResponderGrant}\n onResponderMove={onResponderMove}\n onResponderRelease={onResponderRelease}\n onResponderTerminate={onResponderTerminate}\n {...nativeRest}\n >\n {children}\n </View>\n );\n};\n","import React from \"react\";\nimport {\n Text as RNText,\n TextStyle,\n AccessibilityRole,\n StyleSheet,\n} from \"react-native\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\nconst roleMap: Record<string, AccessibilityRole> = {\n alert: \"alert\",\n heading: \"header\",\n button: \"button\",\n link: \"link\",\n text: \"text\",\n};\n\nconst parseNumericValue = (\n value: string | number | undefined\n): number | undefined => {\n if (value === undefined) return undefined;\n if (typeof value === \"number\") return value;\n const parsed = parseFloat(value);\n return isNaN(parsed) ? undefined : parsed;\n};\n\nexport const Text: React.FC<TextProps> = ({\n children,\n color,\n fontSize,\n fontWeight,\n fontFamily,\n textAlign,\n lineHeight,\n numberOfLines,\n id,\n role,\n testID,\n \"data-testid\": dataTestId,\n style: styleProp,\n ...props\n}) => {\n let resolvedFontFamily = fontFamily\n ? fontFamily.split(\",\")[0].replace(/['\"]/g, \"\").trim()\n : undefined;\n\n if (\n resolvedFontFamily === \"Pilat Wide\" ||\n resolvedFontFamily === \"Pilat Wide Bold\" ||\n resolvedFontFamily === \"Aktiv Grotesk\"\n ) {\n resolvedFontFamily = undefined;\n }\n\n const incomingStyle = StyleSheet.flatten(styleProp) as TextStyle | undefined;\n\n const baseStyle: TextStyle = {\n color: color ?? incomingStyle?.color,\n fontSize: typeof fontSize === \"number\" ? fontSize : undefined,\n fontWeight: fontWeight as TextStyle[\"fontWeight\"],\n fontFamily: resolvedFontFamily,\n textDecorationLine: props.textDecoration as TextStyle[\"textDecorationLine\"],\n textAlign: textAlign ?? incomingStyle?.textAlign,\n lineHeight: parseNumericValue(lineHeight ?? incomingStyle?.lineHeight),\n marginTop: parseNumericValue(\n incomingStyle?.marginTop as number | string | undefined\n ),\n marginBottom: parseNumericValue(\n incomingStyle?.marginBottom as number | string | undefined\n ),\n };\n\n const accessibilityRole = role ? roleMap[role] : undefined;\n\n return (\n <RNText\n style={baseStyle}\n numberOfLines={numberOfLines}\n testID={dataTestId || testID || id}\n accessibilityRole={accessibilityRole}\n >\n {children}\n </RNText>\n );\n};\n","import React from \"react\";\nimport { View, ViewStyle } from \"react-native\";\nimport { IconProps } from \"@xsolla/xui-primitives-core\";\n\nexport const Icon: React.FC<IconProps> = ({\n children,\n color,\n size,\n testID,\n \"data-testid\": dataTestId,\n}) => {\n const style: ViewStyle = {\n width: typeof size === \"number\" ? size : undefined,\n height: typeof size === \"number\" ? size : undefined,\n alignItems: \"center\",\n justifyContent: \"center\",\n };\n\n // On native, we try to pass the color down to children (like Text primitives)\n // to mimic the CSS inheritance behavior of the web version.\n const childrenWithProps = React.Children.map(children, (child) => {\n if (React.isValidElement(child)) {\n return React.cloneElement(child, {\n color: child.props.color || color,\n // Also pass size if child seems to be an icon that needs it\n size: child.props.size || size,\n });\n }\n return child;\n });\n\n return (\n <View style={style} testID={dataTestId || testID}>\n {childrenWithProps}\n </View>\n );\n};\n","import React, { forwardRef } from \"react\";\nimport { TextInput as RNTextInput } from \"react-native\";\nimport { InputPrimitiveProps } from \"@xsolla/xui-primitives-core\";\n\n// Map web input types to React Native keyboard types\nconst keyboardTypeMap: Record<string, any> = {\n text: \"default\",\n number: \"numeric\",\n email: \"email-address\",\n tel: \"phone-pad\",\n url: \"url\",\n decimal: \"decimal-pad\",\n};\n\n// Map web inputMode to React Native keyboard types\nconst inputModeToKeyboardType: Record<string, any> = {\n none: \"default\",\n text: \"default\",\n decimal: \"decimal-pad\",\n numeric: \"number-pad\",\n tel: \"phone-pad\",\n search: \"default\",\n email: \"email-address\",\n url: \"url\",\n};\n\n// Map web autoComplete to React Native textContentType (iOS)\nconst autoCompleteToTextContentType: Record<string, any> = {\n \"one-time-code\": \"oneTimeCode\",\n email: \"emailAddress\",\n username: \"username\",\n password: \"password\",\n \"new-password\": \"newPassword\",\n tel: \"telephoneNumber\",\n \"postal-code\": \"postalCode\",\n name: \"name\",\n};\n\nexport const InputPrimitive = forwardRef<RNTextInput, InputPrimitiveProps>(\n (\n {\n value,\n placeholder,\n onChange,\n onChangeText,\n onFocus,\n onBlur,\n onKeyDown,\n disabled,\n secureTextEntry,\n style,\n color,\n fontSize,\n fontFamily,\n placeholderTextColor,\n maxLength,\n type,\n inputMode,\n autoComplete,\n id,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-label\": ariaLabel,\n \"aria-disabled\": ariaDisabled,\n \"data-testid\": dataTestId,\n testID,\n },\n ref\n ) => {\n const handleChangeText = (text: string) => {\n onChangeText?.(text);\n\n // Create a synthetic event for onChange compatibility\n // Include nativeEvent and no-op methods to prevent runtime errors\n // when consumers expect DOM-like event behavior\n if (onChange) {\n const syntheticEvent = {\n target: { value: text },\n currentTarget: { value: text },\n type: \"change\",\n nativeEvent: { text },\n preventDefault: () => {},\n stopPropagation: () => {},\n isTrusted: false,\n } as unknown as React.ChangeEvent<HTMLInputElement>;\n onChange(syntheticEvent);\n }\n };\n\n // Determine keyboard type - inputMode takes precedence over type\n const keyboardType = inputMode\n ? inputModeToKeyboardType[inputMode] || \"default\"\n : type\n ? keyboardTypeMap[type] || \"default\"\n : \"default\";\n\n // Determine textContentType for iOS autofill\n const textContentType = autoComplete\n ? autoCompleteToTextContentType[autoComplete]\n : undefined;\n\n let resolvedFontFamily = fontFamily\n ? fontFamily.split(\",\")[0].replace(/['\"]/g, \"\").trim()\n : undefined;\n\n if (\n resolvedFontFamily === \"Pilat Wide\" ||\n resolvedFontFamily === \"Pilat Wide Bold\" ||\n resolvedFontFamily === \"Aktiv Grotesk\"\n ) {\n resolvedFontFamily = undefined;\n }\n\n return (\n <RNTextInput\n ref={ref}\n value={value}\n placeholder={placeholder}\n onChangeText={handleChangeText}\n onFocus={onFocus}\n onBlur={onBlur}\n onKeyPress={(e) => {\n // Map onKeyPress to onKeyDown for cross-platform compatibility\n // Include preventDefault to avoid runtime errors when consumers call it\n if (onKeyDown) {\n onKeyDown({\n key: e.nativeEvent.key,\n preventDefault: () => {},\n } as any);\n }\n }}\n editable={!disabled}\n secureTextEntry={secureTextEntry || type === \"password\"}\n keyboardType={keyboardType}\n textContentType={textContentType}\n style={[\n {\n color,\n fontSize: typeof fontSize === \"number\" ? fontSize : undefined,\n fontFamily: resolvedFontFamily,\n flex: 1,\n padding: 0,\n textAlign: (style as any)?.textAlign || \"left\",\n },\n style as any,\n ]}\n placeholderTextColor={placeholderTextColor}\n maxLength={maxLength}\n // React Native accessibility props\n testID={dataTestId || testID || id}\n accessibilityLabel={ariaLabel}\n accessibilityHint={ariaDescribedBy}\n accessibilityState={{\n disabled: disabled || ariaDisabled,\n }}\n accessible={true}\n />\n );\n }\n);\n\nInputPrimitive.displayName = \"InputPrimitive\";\n"],"mappings":"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","names":["import_react","import_react_native","import_jsx_runtime","RNText","import_react_native","import_jsx_runtime","React","import_react","import_react_native","import_jsx_runtime","RNTextInput","import_jsx_runtime"]}
package/native/index.mjs CHANGED
@@ -408,7 +408,9 @@ var InputPrimitive = forwardRef(
408
408
  InputPrimitive.displayName = "InputPrimitive";
409
409
 
410
410
  // src/Autocomplete.tsx
411
- import { useResolvedTheme } from "@xsolla/xui-core";
411
+ import {
412
+ useResolvedTheme
413
+ } from "@xsolla/xui-core";
412
414
  import { Spinner } from "@xsolla/xui-spinner";
413
415
  import { jsx as jsx5, jsxs } from "react/jsx-runtime";
414
416
  var SearchIcon = () => /* @__PURE__ */ jsxs(
@@ -550,9 +552,15 @@ var Autocomplete = ({
550
552
  emptyMessage = "No results found",
551
553
  testID,
552
554
  themeMode,
553
- themeProductContext
555
+ themeProductContext,
556
+ overlayThemeMode,
557
+ overlayThemeProductContext
554
558
  }) => {
555
559
  const { theme } = useResolvedTheme({ themeMode, themeProductContext });
560
+ const { theme: overlayTheme } = useResolvedTheme({
561
+ themeMode: overlayThemeMode ?? themeMode,
562
+ themeProductContext: overlayThemeProductContext ?? themeProductContext
563
+ });
556
564
  const [internalValue, setInternalValue] = useState(propValue || "");
557
565
  const [isFocused, setIsFocused] = useState(false);
558
566
  const [activeIndex, setActiveIndex] = useState(-1);
@@ -688,7 +696,7 @@ var Autocomplete = ({
688
696
  const iconColor = isDisable ? inputColors.textDisable : placeholderColor;
689
697
  const getItemBackgroundColor = (index, disabled) => {
690
698
  if (activeIndex === index && !disabled) {
691
- return theme.colors.control.input.bgHover;
699
+ return overlayTheme.colors.control.input.bgHover;
692
700
  }
693
701
  return "transparent";
694
702
  };
@@ -783,10 +791,10 @@ var Autocomplete = ({
783
791
  top: sizeStyles.height + (label ? 28 : 0) + 4,
784
792
  left: 0,
785
793
  right: 0,
786
- backgroundColor: theme.colors.background.secondary,
787
- borderColor: theme.colors.border.secondary,
794
+ backgroundColor: overlayTheme.colors.background.secondary,
795
+ borderColor: overlayTheme.colors.border.secondary,
788
796
  borderWidth: 1,
789
- borderRadius: theme.shape.contextMenu[contextMenuSize].borderRadius,
797
+ borderRadius: overlayTheme.shape.contextMenu[contextMenuSize].borderRadius,
790
798
  paddingVertical: menuSizeStyles.paddingVertical,
791
799
  width: dropdownWidth,
792
800
  style: {
@@ -809,7 +817,7 @@ var Autocomplete = ({
809
817
  Spinner,
810
818
  {
811
819
  size: "md",
812
- color: theme.colors.control.brand.primary.bg
820
+ color: overlayTheme.colors.control.brand.primary.bg
813
821
  }
814
822
  )
815
823
  }
@@ -826,8 +834,12 @@ var Autocomplete = ({
826
834
  paddingHorizontal: menuSizeStyles.itemPaddingHorizontal,
827
835
  paddingVertical: menuSizeStyles.itemPaddingVertical,
828
836
  backgroundColor: getItemBackgroundColor(index, option.disabled),
829
- hoverStyle: !option.disabled ? { backgroundColor: theme.colors.control.input.bgHover } : void 0,
830
- pressStyle: !option.disabled ? { backgroundColor: theme.colors.control.input.bgDisable } : void 0,
837
+ hoverStyle: !option.disabled ? {
838
+ backgroundColor: overlayTheme.colors.control.input.bgHover
839
+ } : void 0,
840
+ pressStyle: !option.disabled ? {
841
+ backgroundColor: overlayTheme.colors.control.input.bgDisable
842
+ } : void 0,
831
843
  onPress: () => !option.disabled && handleSelect(option),
832
844
  style: {
833
845
  cursor: option.disabled ? "not-allowed" : "pointer",
@@ -845,7 +857,7 @@ var Autocomplete = ({
845
857
  Icon,
846
858
  {
847
859
  size: menuSizeStyles.iconSize,
848
- color: option.disabled ? theme.colors.content.tertiary : theme.colors.content.secondary,
860
+ color: option.disabled ? overlayTheme.colors.content.tertiary : overlayTheme.colors.content.secondary,
849
861
  children: option.icon
850
862
  }
851
863
  )
@@ -855,7 +867,7 @@ var Autocomplete = ({
855
867
  /* @__PURE__ */ jsx5(
856
868
  Text,
857
869
  {
858
- color: option.disabled ? theme.colors.control.input.textDisable : theme.colors.content.primary,
870
+ color: option.disabled ? overlayTheme.colors.control.input.textDisable : overlayTheme.colors.content.primary,
859
871
  fontSize: menuSizeStyles.fontSize,
860
872
  fontWeight: "400",
861
873
  lineHeight: menuSizeStyles.fontSize + 2,
@@ -865,7 +877,7 @@ var Autocomplete = ({
865
877
  option.description && /* @__PURE__ */ jsx5(
866
878
  Text,
867
879
  {
868
- color: theme.colors.content.tertiary,
880
+ color: overlayTheme.colors.content.tertiary,
869
881
  fontSize: menuSizeStyles.descriptionFontSize,
870
882
  lineHeight: menuSizeStyles.descriptionFontSize + 2,
871
883
  children: option.description
@@ -878,7 +890,7 @@ var Autocomplete = ({
878
890
  )) : /* @__PURE__ */ jsx5(Box, { padding: 16, alignItems: "center", children: /* @__PURE__ */ jsx5(
879
891
  Text,
880
892
  {
881
- color: theme.colors.content.tertiary,
893
+ color: overlayTheme.colors.content.tertiary,
882
894
  fontSize: menuSizeStyles.fontSize,
883
895
  children: emptyMessage
884
896
  }