@xsolla/xui-button 0.172.2 → 0.173.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.
Files changed (14) hide show
  1. package/README.md +41 -14
  2. package/native/index.d.mts +8 -1
  3. package/native/index.d.ts +8 -1
  4. package/native/index.js +9 -10
  5. package/native/index.js.map +1 -1
  6. package/native/index.mjs +14 -15
  7. package/native/index.mjs.map +1 -1
  8. package/package.json +4 -4
  9. package/web/index.d.mts +8 -1
  10. package/web/index.d.ts +8 -1
  11. package/web/index.js +9 -10
  12. package/web/index.js.map +1 -1
  13. package/web/index.mjs +14 -15
  14. package/web/index.mjs.map +1 -1
package/web/index.js CHANGED
@@ -901,6 +901,7 @@ var FlexButton = ({
901
901
  variant = "brand",
902
902
  size = "md",
903
903
  background = false,
904
+ hoverBackground = true,
904
905
  disabled = false,
905
906
  loading = false,
906
907
  iconLeft,
@@ -917,11 +918,9 @@ var FlexButton = ({
917
918
  "aria-controls": ariaControls,
918
919
  testID,
919
920
  tabIndex = 0,
920
- themeMode,
921
- themeProductContext,
922
921
  ...buttonProps
923
922
  }) => {
924
- const { theme } = (0, import_xui_core3.useResolvedTheme)({ themeMode, themeProductContext });
923
+ const { theme } = (0, import_xui_core3.useDesignSystem)();
925
924
  const [state, setState] = (0, import_react5.useState)("default");
926
925
  const [isFocused, setIsFocused] = (0, import_react5.useState)(false);
927
926
  const isMouseOverRef = (0, import_react5.useRef)(false);
@@ -945,8 +944,8 @@ var FlexButton = ({
945
944
  };
946
945
  }
947
946
  return {
948
- bg: currentState === "press" ? theme.colors.background.brand.primary : currentState === "hover" ? theme.colors.overlay.brand : "transparent",
949
- text: currentState === "press" ? theme.colors.content.on.brand : theme.colors.content.brand.primary,
947
+ bg: !hoverBackground ? "transparent" : currentState === "press" ? theme.colors.background.brand.primary : currentState === "hover" ? theme.colors.overlay.brand : "transparent",
948
+ text: currentState === "press" && hoverBackground ? theme.colors.content.on.brand : theme.colors.content.brand.primary,
950
949
  border: void 0
951
950
  };
952
951
  case "primary":
@@ -958,7 +957,7 @@ var FlexButton = ({
958
957
  };
959
958
  }
960
959
  return {
961
- bg: currentState === "press" || currentState === "hover" ? theme.colors.overlay.mono : "transparent",
960
+ bg: !hoverBackground ? "transparent" : currentState === "press" || currentState === "hover" ? theme.colors.overlay.mono : "transparent",
962
961
  text: theme.colors.content.primary,
963
962
  border: currentState === "press" ? theme.colors.border.primary : void 0
964
963
  };
@@ -971,7 +970,7 @@ var FlexButton = ({
971
970
  };
972
971
  }
973
972
  return {
974
- bg: currentState === "press" || currentState === "hover" ? theme.colors.overlay.mono : "transparent",
973
+ bg: !hoverBackground ? "transparent" : currentState === "press" || currentState === "hover" ? theme.colors.overlay.mono : "transparent",
975
974
  text: currentState === "press" ? theme.colors.content.primary : currentState === "hover" ? theme.colors.content.secondary : theme.colors.content.secondary,
976
975
  border: void 0
977
976
  };
@@ -984,7 +983,7 @@ var FlexButton = ({
984
983
  };
985
984
  }
986
985
  return {
987
- bg: currentState === "press" || currentState === "hover" ? theme.colors.overlay.mono : "transparent",
986
+ bg: !hoverBackground ? "transparent" : currentState === "press" || currentState === "hover" ? theme.colors.overlay.mono : "transparent",
988
987
  text: currentState === "press" ? theme.colors.content.secondary : currentState === "hover" ? theme.colors.content.tertiary : theme.colors.content.tertiary,
989
988
  border: void 0
990
989
  };
@@ -997,7 +996,7 @@ var FlexButton = ({
997
996
  };
998
997
  }
999
998
  return {
1000
- bg: currentState === "press" ? theme.colors.background.brandExtra.primary : currentState === "hover" ? theme.colors.overlay.brandExtra : "transparent",
999
+ bg: !hoverBackground ? "transparent" : currentState === "press" ? theme.colors.background.brandExtra.primary : currentState === "hover" ? theme.colors.overlay.brandExtra : "transparent",
1001
1000
  text: currentState === "press" ? theme.colors.content.on.brandExtra : theme.colors.content.brandExtra.secondary,
1002
1001
  border: void 0
1003
1002
  };
@@ -1010,7 +1009,7 @@ var FlexButton = ({
1010
1009
  };
1011
1010
  }
1012
1011
  return {
1013
- bg: currentState === "press" || currentState === "hover" ? theme.colors.overlay.mono : "transparent",
1012
+ bg: !hoverBackground ? "transparent" : currentState === "press" || currentState === "hover" ? theme.colors.overlay.mono : "transparent",
1014
1013
  text: theme.colors.content.inverse,
1015
1014
  border: void 0
1016
1015
  };